Universal Android Application Template

Multi purpose Android Template

Thank you for purchasing my template, I really appreciate. Please read the documentation carefully, and if you have any questions, just contact me :)

Welcome

Again thank you for downloading my template, let me give you a small introduction to the features:

Now there are three options for you:

 

Getting Started

Installing JRE

In this step we are going to install the java runtime environment.

  1. First, visit the java website: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
  2. Now scroll down till you see this window, accept the license agreement and download the version for your PC.
  3. Follow the onscreen installation instructions, make sure that you install everything except the demos and samples.

Adding Java to our path

After java has successfully been installed, we have to add java to our path (if you are a Mac user, skip this).

Windows 7

  1. Select Computer from the Start menu
  2. Choose System Properties from the context menu
  3. Click Advanced system settings > Advanced tab
  4. Click on Environment Variables, under System Variables, find PATH, and click on it, if you do not have the PATH variable, you can add it.
  5. Continue to step 6

Windows XP

  1. Start -> Control Panel -> System -> Advanced
  2. Click on Environment Variables, under System Variables, find PATH, and click on it, if you do not have the PATH variable, you can add it.
  3. Continue to step 6

Windows Vista

  1. Right click My Computer icon
  2. Choose Properties from the context menu
  3. Click Advanced tab (Advanced system settings link in Vista)
  4. Find PATH and click on it, if you do not have the PATH variable, you can add it.
  5. Continue to step 6

Windows (all)

  1. Determine what you path to the java bin directory is, this will probably be something like c:\program files\java\jdk1.7.xxx\bin
  2. It’s important you have the precise path.
  3. Assuming there is already text in the variable value box, type a ; followed by your path, no spaces.

Linux

Follow the instructions on the Java website: http://www.java.com/en/download/help/path.xml

Installing ADT bundle

Go to http://developer.android.com/sdk/installing/bundle.html

  1. Download the bundle, and unzip it to a good location (example: My documents/development).
  2. Now open the “Eclipse” folder inside the unzip location (in the example: development), and run eclipse.exe (or similar on linux/mac)
  3. After Eclipse has been loaded, go to window à Android SDK manager.
  4. Check the checkbox next to Android 4.2 and Tools and install the packages.

Importing

In this step, we will import the project & the required libraries to eclipse. You can download the required libraries manually, or use the libraries packed in the libraries.zip file, the last option would be the easiest, if you are a more advanced user, you can also download the required libraries manually from their websites to have the latest updates.

Preparation

  1. Extract the template's zip file to a new folder on your desktop.
  2. Extract the libraries' zip file to the same folder on your desktop OR if you downloaded the libraries manually, copy them to the folder on your deskop.

Importing the project(s)

  1. Open eclipse and go to file --> import
  2. Choose: Android --> Existing Android Code into Workspace and click Next.
  3. Now choose, select root directory --> browse and browse to the place where you extracted your template & libraries
  4. Click select all (there should be several items).
  5. Check the “copy project into workspace” checkbox.
  6. Click finish.

Google Play Services

  1. In Eclipse (with ADT), select Window > Android SDK Manager.
  2. Scroll to the bottom of the package list, expand Extras, select Google Play services, and install it.
  3. Determine the location of Google Play Services: ANDROID-SDK-LOCATION/extras/google/google_play_services/libproject/google-play-services_lib/ (in the example: My documents/development/sdk/ is the sdk location)
  4. Import the library project into your workspace. Click File > Import, select Android > Existing Android Code into Workspace, and browse to the location of the library project to import it.

Link the libraries

  1. Right click your library projects (slidelibrary)
  2. Select properties --> android (on the left)
  3. Check the checkbox "is library"
  4. Now go to the "Universal Application" project and right click it
  5. Select properties --> android (on the left)
  6. Click the "Add.." button and add the library projects & the Google Play Services library

Error solving

Note: You don’t need this step if you do not have any errors (project with error looks like: ).

  1. Make sure your project is selected and go to project --> clean, select your project and click clean.
  2. Right click your project --> properties  --> Java compiler --> Java compliance level and change it to 1.7
  3. Right click your project --> Android tools --> Fix project properties
  4. Check if you have added all libraries (in libs folder & linked libraries), and if Google Play Services is succesfully linked.
  5. If you get "Unable to resolve target" you need to restart Eclipse.
  6. Google the errors that you are getting (errors window).
  7. Get help on our FAQ.
  8. Contact us.

You have now succesfully imported your project

Configuring

We are now ready to configure our template. There are 2 files we need to edit:

Also, we need to change our assets (the apps logo), and change our package name.

Adding your content

  1. Open Eclipse, and in the project explorer (left pane), go to Universal (or similar) --> src --> com.universal --> slidingmenufragment.java.
  2. Open the file and scroll to the line nr 72 that says "//Tag 1 - Do not edit above this line"
  3. Now delete all the lines between "//Tag 1" and "//Tag 2" and "//Tag 2" and "//Tag 3" and "//Tag 3" and "//Tag 4" (current content between the lines is a demo)
  4. Now we are going to a section, create a new line below "//Tag 1" and paste on of the following rule below on that line. 
    Section oGeneralSection = new Section("General", null);
  5. Now we are going to add some items to our section:
You can add as many items as you would like, an example: 

        Section oGeneralSection = new Section("General", null);
//Tag 2

        oGeneralSection.addSectionItem("NYTimes", null, TweetsActivity.class, "TWITTER_USERNAME", "nytimes");

        oGeneralSection.addSectionItem("A Googler", null, TweetsActivity.class, "TWITTER_USERNAME", "google");

        oGeneralSection.addSectionItem("New York Times videos", null, VideosActivity.class, "YOUTUBE_CONTENT", "UUqnbDFdCpuN8CMEg0VuEBqA,UCqnbDFdCpuN8CMEg0VuEBqA");

        oGeneralSection.addSectionItem("Android Police", null, RssActivity.class, "RSS_URL", "http://feeds.feedburner.com/AndroidPolice?format=xml");

        oGeneralSection.addSectionItem("Google", null, WebviewActivity.class, "WEB_URL", "http://google.com");

//Tag 3
        sectionList.add(oGeneralSection);

This example with output the a menu with 1 section, containing, 2 twitter timelines, 1 youtube item, 1 rss item & 1 webview item. The url of the webview in this example is "Google.com" and the title of this item in the sliding menu will be called "Google". So when the user clicks "Google" He will see the google website in a webview.

Add More Sections

To sort your items, you can use sections. In the example above, all items are in one section, but this is not very structured for the user.

Add a Section (between tag 1 and 2) 

Section oSecondSection = new Section("Section Name", null);

To add an item to a Section (between tag 1 and 2), simply replace oGeneralSection with your section name. 

oSecondSection.addSectionItem(......);

To finish, we need to add the section to the sectionList, we do this (below tag 3) 

sectionList.add(oSecondSection);

The order, in which you add sections or items to sections, does not matter. Every sections needs to have an unique name (in the sample oSecondSection) you can choose any type you would like oVideosSection for example. In the example the section is called Section Name but you can choose any name, just make sure it does not include invalid characters and that it is not to long.

Customizing the app

We now are going to change your app's name & icon also, we are going to set up the template with the required Google Api codes

  1. Open the file strings.xml in res --> values 
  2. Enter the required value in the tag, so for example: 
  3. <string name="app_name">The Awesome Band News</string>
  4. Also, Change your apps about text, by using html code between the <![CDATA[  and ]]> tags.

We also have to enter our API access keys, note that the keys for twitter & youtube are required for the app to work. You only have to enter your Maps API key, if you are going to use it (add a map item).

Setting up notifications

  1. You can enter one RSS Feed (this may also be based on a youtube channel or twitter timeline) that users will be notified about when it updates with a notification.

    Users can manually turn on notifications in settings in a few seconds by a simple swipe.

  2. Find the line below, and replace the placeholder with your own RSS Feed url. 
    <string name="rss_push_url">YOURFEEDURLHERE</string>

Entering your api keys (twitter)

  1. go to https://dev.twitter.com/apps
  2. it will ask you for login
  3. Create Application Screen
  4. fill the form to create application
  5. after create application successfully.
  6. On the next screen you will get your Twitter Customer Key and Twitter Customer Secret etc. under Details tab.
  7. Find the lines below, and enter the values like shown below: 
  8. <string name="twitter_api_consumer_key">YOURCONSUMERKEYHERE</string>
  9.  <string name="twitter_api_consumer_secret_key">YOURSECRETKEYHERE</string>

Entering your api keys (youtube)

  1. For your youtube api key; https://developers.google.com/youtube/2.0/developers_guide_protocol#Developer_Key
  2. Using the information above, you should be able to have retrieved an Android Key (based on your keystore), if the Android Key does not work, you can also create an Server Key since this should also work.
  3. Find the line below, and enter the the api key like shown below 
  4. <string name="youtube_api_key">YOURYOUTUBEAPIKEYEHERE</string>

Entering your api keys (admob) / turning on ads

Warning for Youtube users
Google's policy on using Admob & Youtube together is very strict. If you do not own the shown videos, make sure to ask permission to the respective owners before showing their videos in your app (combined with Admob).
  1. go to admob.com
  2. Login and create a new android app.
  3. Find and write down your publisher id.
  4. Open the file strings.xml in res --> values 
  5. Enter the required value for ad_id and ad_visibilty, so for example: 
  6. <string name="ad_id">YOURPUBIDHERE</string>
<string name="ad_visibility">@string/ad_on</string>

Configuring Maps

If you would like to use google maps, and have added a Google maps item to the menu, you need to configure Google Maps.

  1. First, you need to obtain a Google Maps api key, to obtain one, follow the step by step instructions here.
  2. Now where going to enter those details in strings.xml, browse to the line below, and replace the placeholder with your api key. 
    <string name="maps_api_key">YOURMAPSKEYHERE</string>
Creating a Maps Configuration Array

For every google maps item you would like to add, you need to create a Google Maps Configuration Array in the strings.xml file, this stores information like the location, description, zoom level, etc. It looks something like this: 

 <string-array name="maps_1">
    <item><![CDATA[   
		<b>Adress:</b>
		<br>SomeStreet 5<br>Sydney, Australia<br><br>
		<i>Email: Mail@Company.com</i>
    ]]></item>
    <item>Company</item>
    <item>This is where our office is.</item>
    <item>-33.864</item>
    <item>151.206</item>
    <item>13</item>
</string-array>

  1. To get started, copy the code above and paste it in your strings.xml, make sure to give every Maps Configuration Array an unique name (in the example above "maps_1").
  2. We are going to edit the first item of this array, this is the description. Replace the placeholder with your own the description, you can use basic HTML. 
    <item ><![CDATA[ 
<b>Adress:</b> <br>SomeStreet 5<br>
Sydney, Australia<br><br> 
<i>Email: Mail@Company.com</i> 
]]></item>

    Make sure to online edit between "[CDATA[" and "]]"

  3. Now we are going to change the text that the marker will display, in the 2nd and 3rd item, replace the placeholders with your own text. 
    <item >Company</item> 
<item >This is where our office is.</item>>
  4. Now go to item 4 and 5, and replace the placeholder latitude and longitude (?) with your own, to show a marker on the map on that location 
    <item >-33.864</item> 
<item >151.206</item>
  5. Last, item 6, you can change the zoom level (default is 13): 
    <item >13</item>

Installing the JSON Api plugin

  1. First you will need to download the plugin, preferably the tested version, which is 1.1.1 at http://wordpress.org/plugins/json-api/developers/.
  2. Upload the `json-api` folder to the `/wp-content/plugins/` directory or install directly through the plugin installer.
  3. Activate the plugin through the 'Plugins' menu in WordPress or by using the link provided by the plugin installer.
  4. Enable user-friendly URLs from Settings > Permalinks, use the "Day and name" format.
  5. Determine your API url and use it for the Wordpress items, it will most likely be something like: "yourblogurl.com/api/".

Changing the images

  1. First you will need an app icon, it should be a .png image
  2. You will need to resize your icon to a 512x512 png image for google play store submission and to a 100x100 image for your app itself.
  3. Rename the 100x100 image to ic_launcher.png (make sure it does not become ic_launcher.png.png, sometimes the extension is hidden).
  4. Browse to your template's folder, open it and browse to 'res/drawable-xhdpi/'
  5. Now replace the ic_launcher.png file thats inside this folder with your ic_launcher.png file.

Add images to your sliding menu items (optionally)

If you would like so, you can add images to menu items.

First, take an .png image that you would like to use as icon for an item or section, resize it to 100x100 and place it in  the res --> drawables folder.

Now, head back to the slidingmenufragment.java file and scroll to the line that says "//Tag 2" and browse to the item that you would like to set an icon for. 

oXXXSection.addSectionItem("xxxxx", null, xxxActivity.class, "XXXXX", "xxxx");

Now replace  null with "nameoftheimagewithoutextension" so if you had the image football.png and placed it into the drawable folder. The rule will now be: 

oXXXSection.addSectionItem("xxxxx", "football", xxxActivity.class, "XXXXX", "xxxx");

Now replace the text between the second brackets, in this example: "globe" with "nameoftheimagewithoutextension" for example "football"

Finishing

In this step, we are going to change the package name, and compile our app.

Changing the package name

The package name is you apps unique identifier. It is mentioned in your manifest and all your java files, and it is your project structure. Luckely Eclipse has some build in features to change the package name.

Righ click the project --> android tools --> rename application package

Now chose your package name, this is usually com.yourcompany.name

If everything went correctly, com.universal.xxx packages in the project explorer should be changed into com.yourcompany.name, just as the package name in the manifest.

If you would like to translate your app, go to the extras section!

Compiling our app

In this step we are going to create an apk, and you can run it on your phone!

  1. Right click your project --> export
  2. Select android application and click next
  3. Follow the onscreen instructions to create a keystore, this is only required once. Save the keystore on a safe place, otherwise you won’t be able to update your app.
  4. Export the android application to a location (desktop for example).

You can now put this file: Xxx.apk on your phone, you will be prompted to check the unknown sources checkbox if you have not checked it already, you users won’t have to do this if they download the app from the google play store.

Submitting to the Play Store

In this step we are going to publish your app to the Google Play store.

What you will need:

  1. A valid Google account.
  2. 25$ (one time)
  3. A credit card.
  4. Some Assets (screenshots, etc)

Basic instructions:

 

  1. Browse to: https://play.google.com/apps/publish and follow the onscreen instructions. 
  2. Click the +Add a new app button, enter your apps name, and upload your .apk file.
  3. Take your time to open all the tabs: APK, Store Listing, Pricing and Distribution, etc. and fill in at least all the required items.

Concluding

We hope you have successfully submitted your app to the Google Play Store! You can always use Google Analytics to find out what part of your app your users like the best and make your content even better!

Monitizing

Support

If you get in any trouble using this guide, you can visite our support website: sherdle.com/support where you can ask questions to other users, view our FAQ & more.

License

For more license information, open the license.txt file found inside your template.

Extra

Translating

You can easily translate this template into your own language. You only have to translate the text inside the strings.xml file. As example, I'm going to translate the following string into german. 

<string name="play_button">Play</string>

Just translate the word Play 

<string name="play_button">Aufspielen</string>

It's just as easy as that, just repeat this with all the strings. But be carefull with special characters!