Android App Process with Cordova-PhoneGap and Eclipse – from Download to Google Play


The following steps parallel this page for PhoneGap 1.8.x for the most part: http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart 

These steps assume you’ve already downloaded and installed Eclipse Classic, Android SDK, and the ADT Plugin, as mentioned in the above web page (which includes links if you haven’t downloaded them).

Set up the Eclipse workspace

Eclipse is the software development kit (SDK) you’ll use to assemble your project, then prepare it for app submission to Google Play or any other Android app store. The final file used in devices ends in “.apk” and this is the software that creates that file.

1. Start Eclipse.

2. File > New… > Project. For “Select a wizard,” see that “Android Project” is selected and hit Next.

3. Create Android Project screen: Project name is final app name, no spaces.

4. Select Build Target screen: Android 4.0.3 in this case.

5. Application Info screen:

Application Name: with spaces.

Package Name: com.[company].[appnamewithnospaces]

Create Activity: [appnamewithnospaces]Activity [use default given]

Min SDK version: 15

Click Finish.

6. The Eclipse Workspace appears, with the project name in a frame at left. Click on the down arrow to the left of the project name to see the folders of the root directory. Right-click on the project name, New >  Folder, and for Folder name put: libs. Finish. This creates a /libs folder in the root directory.

7. Right-click on assets, New >  Folder, and in Folder name: www. Finish. This creates a /www folder in the assets directory.

Add Cordova PhoneGap

1. Download the latest Cordova/PhoneGap files from http://phonegap.com/. Open the folder in the computer’s Downloads folder to show the contents of  /lib/android. Drag the .jar file in that folder to… Eclipse’s /libs folder. Select to Copy files; OK.

2. Drag the .js file in Finder’s /lib/android/ to Eclipse’s assets/www folder. Select to Copy files; OK. Double-click on folders to see if the files were copied in.

3. Right-click on the /libs folder in Eclipse, then Build Paths > Configure Build Path.

4. Click on the Libraries button at top, then on Add JARs, then navigate to the /libs folder within Eclipse and select the jar file, then OK, OK.

Edit the .java file

1. Drill down Eclipse’s /src folder until you get to the file ending in .java and right-click on it, then Open With > Text Editor.

2. Add a line, from:

import android.os.Bundle;

to:

import android.os.Bundle;
import org.apache.cordova.*;

3.  Change:

setContentView(R.layout.main);

to:

super.loadUrl("file:///android_asset/www/index.html");

4. Change:

public class [appnamewithnospaces]Activity extends Activity {

to:

public class [appnamewithnospaces]Activity extends DroidGap {

5. Save the file.

Edit the AndroidManifest.xml file 

1.  Right-click on AndroidManifest.xml and select Open With > Text Editor.

2. Paste the following text right after the "<uses-sdk android:minSdkVersion="15" />" line:
    <supports-screens 
    android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" 
    android:resizeable="true" 
    android:anyDensity="true" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

3. Comment out or delete all the permissions your app doesn’t need.

4. Right ABOVE the line “<intent-filter>” put the following line:

android:configChanges="orientation|keyboardHidden"

4a. Explanatory note on this page:

    android:versionCode="1" [This is the first version of your app. Subsequent versions are always sequentially numbered. Not shown to the public.]
    android:versionName="1.0" > [This is the actual version shown to users.]

4b. Getting the app to display on various sized screens (http://developer.android.com/guide/practices/screens_support.html). Check that this is in AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"
        android:anyDensity="true" />
    ...
</manifest>

4c. Save the file.

Add Your Program’s Assets

1. Open the folder containing all your www assets in Finder. With the windows side by side, copy/paste or drag all your “assets” of HTML pages, JS files, and images to Eclipse’s /assets/www folder. Make sure “Copy files and folders” is selected.

2. In Eclipse, select the project name in the Package Explorer and refresh the project (File > Refresh or F5).

Specify your App Title

1. Specify the name you want to appear under the icon on the device’s home screen. Open res/values/strings.xml with the Text Editor and edit where shown. Keep the text short or it will be truncated. Make sure to check this later in your device:

<string name="app_name">[app name under icon goes here]</string>

Prepare Artwork

1. Prepare a large image of app artwork for Google Play:

512 x 512 pixel jpg image (or 1024 x 1024px if an iPhone or iPad version will later be submitted to the iTunes App Store).

2. Prepare .png format app icons of the following sizes (a reduced, possibly simplified, version of the above artwork).

Low density screens (ldpi folder): 36 x 36 px
Med density screens (mdpi folder): 48 x 48 px
High density screens (hdpi folder): 72 x 72 px
Extra High density screens (xdpi folder): 96 x 96 px

3. Insert the icons into the following locations. They will all be named “icon.png.”

res/
drawable-ldpi/
icon.png

drawable-mdpi/
icon.png

drawable-hdpi/
icon.png

drawable-xdpi/
icon.png

Sign the App for the App Store

Apps in the app store must be “signed” with keys. Here are the steps to accomplish this.

1. Right-click on the project name in Eclipse, then click on Android Tools > Export Signed Application Package.

2. Project Checks dialog:

This screen will tell you if you have serious errors that need to be fixed before you can go further.

3. Key alias selection dialog:

Create the key using the app name, no spaces. [WARNING: if this is a upgrade, use the same name as the earlier version!]

4. Key ["Private Key"] Creation dialog:

Alias: app_name, no spaces: rccheatsheets

password of keystore,

validity: 50 [meaning, good for 50 years. Validity period must end after 22 October 2033]

First and Last name:

Organizational unit: [division of company, or leave blank]

Organization: [use no punctuation - only letters and numbers, or you'll get an "keytool error" notice later.]

City:

State:

Country: 01. [which is "US"]

Destination APK file: [Write down the above Key Creation information and APK destination and keep it safe for later retrieval and app updates. If it is lost, you can't upgrade the app any further. To release the app after this file has been lost, you'll have to create a whole new app and release it separately. Perhaps make a separate private key for each app, especially if you expect to sell the rights to an app to someone else.] This is the location where Eclipse will save the program’s .apk file that you would upload to Google Play.

If you get: “keytool error: java.io.IOException: Incorrect AVA format”, then an invalid character was used in one of the previous screens. Remove any punctuation so only letters and numbers remain.

Debugging

To debug program in Eclipse:

In Eclipse: Select program title at left.

Click: Window > Open Perspective > Debug (switching from the normal perspective of “Java.”)

Click: Run > Debug. Three windows will populate: Debug Console, Error Log, and LogCat.

If you get: “The application … has stopped unexpectedly. Please try again.” A permissions may be missing from the AndroidManifest.xml. (See http://developer.android.com/reference/android/Manifest.permission.html ) Also, make sure you copied the Android version of the Cordova jar and js files and not the iPhone version Cordova files.

To test in Android device, device turned off:

Remove SD card and insert into computer.

Copy the program’s [appname].apk file to the SC card, then Eject it.

Insert the SD card into the Android device.

Turn on unit, slide the lock icon.

Tap on OI File Manager, sdcard-xxxx, apk name, Install. You may now operate the app.

Delete from device when done, and turn off debugging.

Test in phone connected to Eclipse via USB: 

In Android phone, set it up for debugging first. (In my device: Tap on Settings > Applications  Development.)

Plug device into computer, right-click on app name, then Run As > Android Application.

Click on the project name, then Project… > Clean to clean it up.

Screen Captures

You’ll want to include screen captures for upload to Google Play. Choose carefully to project your app in its best light. What if your device doesn’t do screen captures? My eLocity tablet did not. Here is what I did. Get screen captures of the app from within Eclipse by simply right-clicking on assets/www/index.html, then Open With > Browser window.

Narrow the window to approximate device size width.

Open the Grab screengrab application and capture the screen.

In Photoshop ($$$$) or Gimp (free), open a new 640 x 960 size file and paste in all the screenshots and resize them to fit. This is the size Google Play needs. More than 5 images are allowed. Save all as png format.

Another way:

With phone plugged in, in Eclipse, click Window > Open Perspective > Other > DDMS [stands for "Dalvik Debug Monitor Server"]. Select your device at left. In device, go to screen desired. Click on camera icon in DDMS. Click on Save button above the picture captured.

Converting App from iPhone to Android

For a simple app, consider making the following two changes.

1. Remove references to iPhone apps and iTunes App Store and any other competitions to Google services.

2. Back buttons are not needed; Android uses a hard-coded back button on the device for this. So comment out the code for the back buttons, if feasible.

Warnings in Console I’ve Received

“Failed to load properties file for project ‘[appname]‘.” Fixed by right-clicking on project name, Android Tools > Fix Project Properties.

“WARNING: Application does not specify an API level requirement!” seen in console. When you start a new Android project, you specify a minimum API level, such as 15. If you chose “4,” then that needs to be indicated in the AndroidManifest.xml file as:

<uses-sdk android:minSdkVersion="4" />

“No grammar constraints (DTD or SML schema) detected for the document.” in console. Simply go to Eclipse > Preferences > XML > XML Files > Validation. Then change the “Indicate when no grammar is specified” option to “Ignore.” Then do Project > Clean. You may have to restart your Eclipse for it to take effect.

For Public Release

To register as a Google Play developer and set up your publisher account, visit the Google Play publisher site:https://play.google.com/apps/publish/Home

About these ads

7 thoughts on “Android App Process with Cordova-PhoneGap and Eclipse – from Download to Google Play

  1. I’m stuck at this point
    4.change
    public class [appnamewithnospaces]Activity extends Activity {
    to
    public class [appnamewithnospaces]Activity extends DroidGap {

    when i do this it shows that-”Syntax error on tokens,delete these tokens”
    Beside this everything is perferct.what will i do?
    Plz inform..
    I would be much obliged

    • I’ve never seen this error before. Does the app compile ok in spite of the error? I suggest copying the error exactly as written and pasting it into Google for searching. I’m sure other’s have had this problem and it has already been addressed.

      Notice that these instructions for for an earlier version of Cordova. Are you using that version, or a later one? If a later one, like 3.0+, then these instructions may not work for you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s