Documentation 3.0.3

Spatullr
User Guide
Version 3.0.3
Table of Contents
Revision History.................................................................................................................................... 3
Introduction.......................................................................................................................................... 4
About The File.......................................................................................................................................4
Installing Required Softwares............................................................................................................... 5
Opening Android Project...................................................................................................................... 5
Renaming Application Package.............................................................................................................7
Inserting Data to Database................................................................................................................. 10
Setting Up Admob...............................................................................................................................14
Customizing Application Color............................................................................................................19
Customizing Image Resources and App Content................................................................................19
Running the Application..................................................................................................................... 21
Publishing Android App...................................................................................................................... 22
Updating App Version.........................................................................................................................24
About the Author................................................................................................................................24
Spatullr copyright 2015. All rights reserved. | pongodev.
Revision History
Author
Remarks
Version
Date
Taufan E.
Updated hole documentation content
3.0.1
22 January
2015
Taufan E.
Updated change log
3.0.2
12 February
2015
Taufan E.
Updated change log
3.0.3
8 March 2015
Introduction
Thank you for purchasing our item, Spatullr (previously known as Recipes App for Android). If you
have any questions that are beyond the scope of this user guide, please feel free to post the
questions via pongodev support forum. You can register an account using purchase using your
Envato username and the Purchase Code Item of this item. Thanks so much!
Do not forget to rate this item if you think it is great. And also like pongodev Facebook page here
and follow pongodev Twitter here to get the latest information about update and new items.
About The File

Spatullr is the Android recipes app template where previously known as Recipes App for Android. You can
now turn recipes that you have made into mobile app and monetize it via ads or paid app in easy way, fast,
and low price. The latest version add new awesome features and improvement of existing features, includes
migrating project to Android Studio, Google material design implementation, categorized data, add to
favorites, interstitial ad, and easiness of customization.
The complete features are below:
1. Android Studio project
2. Beautiful user interface with Google material design implementation
3. Categorized recipes data
4. Add recipes to favorites
5. Banner and interstitial Admob
6. Transition between screen
7. Search recipes
8. Tablet support with two pane layout
9. Sharing to other apps
10. Easiness of customization
11. Well documented user guide
5
When you purchase this item you will get the following assets:
1. App source code
2. User guide
Change Log version 3.0.3:
Make it support unicode language
Change typography rule with material design rule
Change padding size with material design rule
Installing Required Softwares

As this project now use Android Studio, you need to download Android Studio first in order to be
able to configure the app. Besides Android Studio, you also need to install the latest version of Java
Development Kit (JDK).
You can download Java Development Kit (JDK) here and Android Studio here. Install JDK first to your
computer and after finishing installing JDK, add java path to system variables if necessary. You can
read an article about adding java path into system variables on our blog here. Now, you can install
Android Studio, just follow the instruction until finish installing.
Opening Android Project

Now, you have already installed all softwares that required to configure Android project. To open
Android project to Android Studio follow the following steps:
1. Run Android Studio, you will see Welcome to Android Studio window when first time run
Android Studio as you do not have any project yet.

2. Select Open an existing Android Studio project and go to the location of where you store
your Android project. After that click Choose button, See Illustration 1 for detail.
Illustration 1: Open Android project
3. A new window will open Android project and the project will appear on Project window on
the left side.

4. You can now run your Android project by selecting Run > Run 'app'.
5. Choose Device window will appear, you can select whether you want to run your app on
Android device that connected to your computer or Android emulator that you have
already created before. Click OK button to run the project.
Illustration 2: Choose Device window
6. If your Android project contain error and or asked to sync your gradle file, open
build.gradle(Module: app) file in Gradle scripts directory of the project then click Sync
Now... button at the top right corner of editor window to sync the project gradle.
Illustration 3: Sync gradle file
7. When running this app you will find that the app still comes with dummy data. You need to
insert your own data and configure the app to meet your need.
Renaming Application Package

Renaming application package is required before publishing your Android app. Make sure that your
package name is unique as this will be checked when you publish your app on market. Steps to
rename the package name of this project are below:
1. On Android Studio right click on java directory that located within app directory of your
project and select New > Package. See Illustration 4 for detail.
Illustration 4: Create new package
2. When Choose Destination Directory window appear, select /app/src/main/java and then
click OK button.
3. Insert your new package name in New Package window and click OK button. We suggest to
use your website name followed by your app name. For example, com.website.yourapp.
See Illustration 5 for detail.
Illustration 5: New Package window
4. After that, move all directories in old package to your new package by selecting all
directories and drag them to your new package name.
Illustration 6: Drag all directories to new

package
5. You will see Select Refactoring window appear. Select Move everything from 6 directories
to another directory and click OK button. If there is a Problem Detected window appear,
just click Continue button. We will fix it later. All directories now are located in your new
package name. You can delete old package. You package name now should look like
Illustration 7.
Illustration 7: Directories located in new

package
6. As we have changed the package name, the default package name also change, we need to
configure some files that use package name to make the app works. First, go to
AndroidManifest.xml in app/manifests directory and find com.pongodev.recipesapp.

Replace it with your own package name. Scroll down the file and find the following code,
<meta-data
android:name="android.app.default_searchable"
android:value="com.pongodev.recipesapp.activities.ActivitySearch" />
7. Replace com.pongodev.recipesapp with your own package name. Please insure that all
codes that use package name in AndroidManifest.xml have been changed with new
package name.
Illustration 8: Change package name in

AndroidManifest.xml
8. Next step is changing package name in gradle file. Open Build.gradle (Module: app) in
Gradle Scripts directory and find the following code,

defaultConfig {
applicationId "com.pongodev.recipesapp"
minSdkVersion 11
targetSdkVersion 21
versionCode 3
versionName "3.0"
}
9. Change com.pongodev.recipesapp with your own package name. Once you change the
package name, click Sync Now button to sync gradle file.
10
Illustration 9: Change package name in gradle file
10. Other files which also required to change the package name are res/xml/searchable.xml
and java/com.your.package/utils/Utils.java. Find com.pongodev.recipesapp in both files

and replace them with your new package name.
Illustration 10: Change package name in searchable.xml and Utils.java
11. Last step, remove import com.pongodev.recipesapp.R; code in all java files.
Illustration 11: Remove import com.pongodev.recipesapp.R;
12. Try to run the project to see the result. If you follow the steps above correctly, you will see
that the app still work properly.
Inserting Data to Database

This app use SQLite database to stored the data. Below are steps to store data to database:
1. First, download sqlitebrowser here and install it to your computer.
2. Run sqlitebrowser and open database db_recipes that located in app/src/main/assets
directory of your Android project by clicking Open Database.

11
Illustration 12: Open sqlite database
3. You will see that db_recipes consist of two tables, tbl_categories to store categories data
and tbl_recipes to store recipes data. You need to insert category data first before inserting
recipe data as they will be related. Select Browser Data tab and select tbl_categories under
Table dropdown. Select New Record button to add new category data and Delete Record
button to delete category data.
Illustration 13: Add new data to tbl_categories
4. By default, there are already category data within the tbl_categories, you can delete them
and add your own data or update the data by double click on category_name data. As
category_id is auto increment you do not need to insert it, you only need to insert
category_name data but remember to take a note of all category_id because they will be
used in tbl_recipes.
12
Illustration 14: Update existing data
5. After inserting or updating category data, the next data you need to insert is recipe. To
insert recipe data select tbl_recipes in Table dropdown. Please delete all dummy data in
that table and insert yours by clicking New Record button.
Illustration 15: Insert data to tbl_recipes
6. Fill category_id with category_id that available in tbl_categories. For example, if in
tbl_categories there is category called Beverage with category id 5, then when you create
orange juice recipe in tbl_recipes you need to insert 5(category id of Beverage) in
category_id of tbl_recipes.
13
Illustration 16: Insert category_id to tbl_recipes
7. Three other fields that you need to pay attention are ingredients, steps, and image. You can
insert html tag within ingredients and steps. We use bullet tag in database content see
Illustration 16.
Illustration 17: Add html tag in ingredients and steps
8. For image field you need to store your images to res/drawable directory of your Android
project, you can delete the default images that used within this application. Please insure
that the files name are in lower case, without space, and the first character is not number.
Image file format must be in JPG and maximum size is 500x350 px And then, type the name
of the image you store in drawable directory to image field in tbl_recipes. Insert the name
14
of the file only, without extension.
Illustration 18: Add image name to image
9. If you have already inserted all of your data, do not forget to save your database. Click
Write Changes button at the top of sqlitebrowser.
Illustration 19: Save the change
10. Run the app to see the result.
Setting Up Admob
New version of Spatullr comes with the latest version of Admob which has different configuration
with previous version. To set up new version of Admob make sure that you have already upgraded
your Admob account. Go to apps.admob.com and login with your Admob account, if you have not
upgraded your account yet please see this guide from Google about how to do it. Below are steps
to set up Admob on Android project:
1. Login to Admob with your account and select Monetize menu, on Monetize window click
Monetize new app button.
15
Illustration 20: Clicking Monetize new app button
2. Select Add your app manually and fill App name and Platform form, click Add app button
when done.
Illustration 21: Filling App name and Platform form
3. Next step is selecting the ad type, select Banner and do some configuration to the banner,
click Save button when finish.
16
Illustration 22: Selecting ad format and configuration
4. You will get the Ad unit ID, copy that ID and click Done button to finish.
Illustration 23: Copying Ad unit ID
5. Open strings.xml and replace BANNER_AD_UNIT_ID with Ad unit ID.


<string name="banner_ad_unit_id">BANNER_AD_UNIT_ID</string>
6. As this app use two ad formats, banner and interstitial ad, you need to create one ad unit
for interstitial. Click Monetize and select your app name on the left side and select + New
ad unit button to create new ad unit.
17
Illustration 24: Create new ad unit
7. In ad format option, select Interstitial. And the rest configuration is similar with ad banner
format. Click Save button when finish.
Illustration 25: Configure ad unit for interstitial
8. You will get ad unit id for interstitial ad, copy the id. Open strings.xml and replace
INTERSTITIAL_AD_UNIT_ID with the unit ID.


<string name="interstitial_ad_unit_id">INTERSTITIAL_AD_UNIT_ID</string>
9. If you have already published your app on Google Play you can link your app with Admob
by selecting Link your app in application list on Admob page. Search your app on Search
box and click + Select button to link the app. You can skip this step if you have not
published your app on Google Play yet.
18
Illustration 26: Linking app with app on Google Play
10. Other ad configurations that also important are located in java/utils/Utils.java of Android
project. Find the following code in Utils.java,

// For every recipe detail you want to display interstitial ad
public static final int ARG_TRIGGER_VALUE = 3;
// Admob visibility parameter. set 1 to show admob and 0 to hide.
public static final int ARG_ADMOB_VISIBILITY = 1;
// Set value to 1 if you are still in development process, and 0 if you are
ready to publish the app.
public static final int ARG_ADMOB_DEVELOPMENT_TYPE = 1;
// Set default category data, you can see the category id in sqlite
database.
public static final String ARG_DEFAULT_CATEGORY_ID = "2";
11. Change value of ARG_TRIGGER_VALUE to decide when the interstitial ad will appear. In
default the value is 3 where it means every three times user open detail screen the
interstitial ad will appear. Please set the value wisely so that it will not annoy your users.
Change value of ARG_ADMOB_VISIBILITY to 0 if you do not want to display Admob in your
app. Default value is 1 where the Admob is visible. ARG_ADMOB_DEVELOPMENT_TYPE is
used to test the ad. If you want to test your ad whether it display or not you can set the
value to 1 and 0 if you are ready to publish your app. The last configuration is
ARG_DEFAULT_CATEGORY_ID, this is used to set default category recipes that will be
display in two pane layout. You can find the category id in sqlite database of this app.
12. You can run the app to see the result of this ad configuration.
19
Customizing Application Color

Spatullr has implemented material design in the user interface design so that customizing the color
of the app become easier. Here is how to change the color of the app:
1. Open colors.xml that located in res/values directory.
2. color_primary is used for toolbar color, color_primary_dark is used for status bar color(this
only work in Android 5.0 only), and text_color_primary is used for text title color in toolbar.
Illustration 27: App color configuration
3. If you want to change the color based on Google Material Design guidelines, you can use
materialpalette.com as reference.
4. You can also change other color configuration such as for title color, row background color,
and etc in colors.xml.
Illustration 28: Configure other colors
Customizing Image Resources and App Content

To make this app meet your brand, besides customizing the color of the app, you also need to change the
image resources which used in this app and the app content. Please, follow the steps below to do the
20
customization of image resources and app content:
1. To change launcher icon of the app, create your own icon in PNG format and name it as
ic_launcher.png. Create it in 4 different sizes with the following specifications:
a) 72x72 pixels in res/drawable-hdpi directory,
b) 48x48 pixels in res/drawable-mdpi directory,
c) 96x96 pixels in res/drawable-xhdpi directory, and
d) 192x192 pixels in res/drawable-xxhdpi directory.
2. Put those files in each directories via window explorer.
Illustration 29: Access drawable directories via window explorer
3. To change logo of the app, create logo in PNG format and name it as ic_logo.png. Create it in 4
different sizes with the following specifications:
4. Do the same thing like previous step, access drawable directories via window explorer.
5. The next image is splash screen logo, create image in PNG format and name it as
splash_screen_logo.png. Create it in 4 different sizes with the following specifications:
21
6. Besides splash screen logo there is splash screen image, store image in JPG with maximum size
1024x683 pixels to drawable directory.
7. The last customization is app content, you can customize the app content such as application name,
language, Google Play url via strings.xml that located in res/values directory. For Google Play url
you need to change com.your.package with your own package name.
Illustration 30: Customize app content via strings.xml
Running the Application

To run Android project on Android device, please follow the steps below:
1. First, open SDK Manager by clicking Tools > Android > SDK Manager. Insure that Google
USB Driver has been installed, if not download and install the package. (note that Google
USB Driver is not compatible in Mac OSX so you do not need to install it if you are using
Mac OSX)
22
Illustration 31: Install Google USB Driver
2. Enable USB Debugging on your device, you can read here about how to enable USB
debugging on android device.

3. Connect your Android device to your computer with USB cable.
4. After that, on Android Studio select Run > Run 'app'. Select your device in Choose Device
window and click OK button. See Illustration 32 for detail.
Illustration 32: Select your device in Choose Device window
5. If you can see your device on Choose Device window, it means that driver of your Android
device is not installed on your computer yet. You need to install your Android device driver
first.
Publishing Android App

After configuring the package name, inserting data, customizing the user interface color and image
23
resources of the app and ensuring that the app has been run properly, the last step is publishing
your app to APK file. Below are step by step to publishing Android project to APK file:
1. on Android Studio, select Build > Generate Signed APK....
2. Generate Signed APK Wizard window will appear. Select app in module section then click
Next.
3. In the next step, if you have already created key store file click Choose existing... and insert
your key store password and alias. If have not created it yet, click Create new... to create
new key store file.
4. On New Key Store window fill all forms that required and click OK. See Illustration 33 for
detail.
Illustration 33: Fill required form in New Key Store window
5. Last is set the destination folder of APK files, and Build Type to release and click Finish
button.
24
Updating App Version

When you want to update your app on Google Play, make sure that you change the versionCode
and versionName on build.gradle(Module: app) file that located in app/Gradle Scripts directory to
higher number than previous version and click Sync Now, see Illustration 34 for detail.
Illustration 34: Change versioCode and versionName to update app
About the Author

Hello, we are pongodev, mobile developer team from Jakarta, Indonesia. founded on 2012 we
started building and selling mobile applications as a template on Marketplace. our apps usually
focusing on ease of use and good design.
Website: http://pongodev.com
Contact: contact@pongodev.com
Facebook: https://www.facebook.com/pongodev
Twitter: https://twitter.com/pongodev

Documentation 3.0.3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Documentation 3.0.3

Uploaded by

Copyright:

Available Formats

Spatullr

Spatullr copyright 2015. All rights reserved. | pongodev.

Updated hole documentation content

Updated change log

Updated change log

Spatullr copyright 2015. All rights reserved. | pongodev.

About The File

Change Log version 3.0.3:

Make it support unicode language

Change typography rule with material design rule

Change padding size with material design rule

Installing Required Softwares

Opening Android Project

Android Studio as you do not have any project yet.

Spatullr copyright 2015. All rights reserved. | pongodev.

Illustration 1: Open Android project

the left side.

Illustration 2: Choose Device window

Illustration 3: Sync gradle file

Renaming Application Package

Illustration 4: Create new package

Spatullr copyright 2015. All rights reserved. | pongodev.

Illustration 5: New Package window

directories and drag them to your new package name.

Illustration 6: Drag all directories to new

Illustration 7: Directories located in new

AndroidManifest.xml in app/manifests directory and find com.pongodev.recipesapp.

Illustration 8: Change package name in

Gradle Scripts directory and find the following code,

package name, click Sync Now button to sync gradle file.

Spatullr copyright 2015. All rights reserved. | pongodev.

Illustration 9: Change package name in gradle file

and java/com.your.package/utils/Utils.java. Find com.pongodev.recipesapp in both files

Illustration 10: Change package name in searchable.xml and Utils.java

Illustration 11: Remove import com.pongodev.recipesapp.R;

that the app still work properly.

Inserting Data to Database

directory of your Android project by clicking Open Database.

Illustration 12: Open sqlite database

Illustration 13: Add new data to tbl_categories

Spatullr copyright 2015. All rights reserved. | pongodev.

Illustration 14: Update existing data

Illustration 15: Insert data to tbl_recipes

6. Fill category_id with category_id that available in tbl_categories. For example, if in

Spatullr copyright 2015. All rights reserved. | pongodev.

Illustration 16: Insert category_id to tbl_recipes

Illustration 17: Add html tag in ingredients and steps

Spatullr copyright 2015. All rights reserved. | pongodev.

of the file only, without extension.

Illustration 18: Add image name to image

Write Changes button at the top of sqlitebrowser.

Illustration 19: Save the change

10. Run the app to see the result.

Monetize new app button.

Spatullr copyright 2015. All rights reserved. | pongodev.

Illustration 20: Clicking Monetize new app button

Illustration 21: Filling App name and Platform form

click Save button when finish.

Spatullr copyright 2015. All rights reserved. | pongodev.

Illustration 22: Selecting ad format and configuration

Illustration 23: Copying Ad unit ID

5. Open strings.xml and replace BANNER_AD_UNIT_ID with Ad unit ID.

Illustration 24: Create new ad unit

format. Click Save button when finish.