Cordova 2.2 Android App Creation in Mountain Lion with Eclipse

I upgraded an Android app from Cordova 2.0 to 2.2. There were no plugins involved. These are the steps I followed. This article assumes you already have Eclipse (a software developement kit used to create Android apps; available for Windows and Mac) and its associated files installed.

If you are new to developing apps for an app store, I recommend reading the following:

Developing for the Amazon app store:

Developing for Google Play:

Download Cordova 2.2.0

From, I downloaded version 2.2.0 (26.2MB), released Nov. 1, 2012. A list of its upgrade changes can be found here.

It was uncompressed to my folder as: Downloads/phonegap-phonegap-8a3aa47

Set the PATH variable

If you haven’t already, you’ll want to set up your PATH environment variable on your Mac or PC. I’ve posted the steps for the Mac below, but they came from here.

1. Click on the magnifying glass and type in Terminal to open it, or open it from the Dock.
2. Type the following “bash” (Bourne Again SHell) script:

touch ~/.bash_profile; open ~/.bash_profile

3. It opens a file called .bash_profile. We are going to add the paths to your Android SDKs’ “platform-tools” and “tools” directories. I opened the Spotlight and typed in “platform-tools” to locate it. I then opened it in Finder by clicking on the folder in Spotlight. I then held down the command key and tapped the up arrow on the keyboard twice to navigate back up the chain.
4. I opened a new Terminal window and dragged the folders to the window to get the “official” addresses:
a. /Applications/android-sdk-mac_x86/platform-tools
b. /Applications/android-sdk-mac_x86/tools
5. Use these addresses with the following red text in the file that opened up in steps 2-3 (there should be no spaces except after the first word, “export”). Notice that the two paths are separated by a semi-colon:

export PATH=${PATH}:/Applications/android-sdk-mac_x86/platform-toolstools;/Applications/android-sdk-mac_x86/tools

6. Click File > Save and quit the text editor.
7. Open Terminal and type:

source ~/.bash_profile

Set Up a New Project

1. Determine:
a. the path to your project (I wanted mine to be located at  /Documents/workspace/appName)
b. the package name in com.YourCompany.YourAppName format
c. your app name without spaces.
2. Go to the folder where you installed Cordova 2.2 to show the /bin folder.
3. In the Terminal, type cd with a space after it.
4. Now drag the /bin folder to the Terminal window to change to that directory; hit Return.
5. In Terminal, type the following, replacing the “<. . .>” with your text, and press Enter:

./create <project_folder_path> <package_name> <project_name>


./create /Users/yourname/Documents/workspace/appName com.companyname.appName appName

Wait a while as the directory is created with all the files.

Errors I’ve encountered

5. In Terminal, type the following, replacing the “<. . .>” with your text, and press Enter:
./create <project_folder_path> <package_name> <project_name>
a. Ooops! I got this error: 

-bash: ./create: No such file or directory

Well, that’s because I forgot to start at the /bin folder. Drag the /bin folder to the Terminal first.

b. I dragged the /bin folder to Terminal and tried again. Oooops! Got this error: 

An error occurred. Deleting project…

I had not put all folder locations in step 5 of setting the PATH variable; I had left out the /tools variable. Following the current steps above fixed the error. Unfortunately, there seems to be a variety of reasons why users are getting this error.

c. After a different attempt, at a later date, I got this message at the end:

… is a directory

… and the directory was not created. I amended the script by first typing “cd” in the Terminal, then dragging the /bin folder over, then adding the path starting with ./create /Users/Steve/Documents … . Then the directory was created.

Continue Setting Up in Eclipse

1. Launch Eclipse and: File > New > Project. (If you don’t see Eclipse in the dock at bottom, click on the magnifying glass search icon at the top of the desktop and type the application name.)
2. Under Wizards, select Android > Android Application Project, then Next.
3. In the New Android Application screen, fill out the Application Name (as it will appear in the Google Play store), Project Name (used only by Eclipse), and your Package Name (which must stay the same throughout the lifetime of your application).
4. You may set your Build SDK as Android 4.1 (API 16) and minimum Required SDK as API 8, which is Android 2.2. Click Next.
5. In Configure Launcher Icon screen, click on Image > Browse, and select your icon. You should see your icon reduced into the four sizes shown in the Preview.
6. Decide if you want the white padding or not, and set the shape to circle or square. Click Next.
7. In Create Activity, choose BlankActivity. Click Next.
8. In New Blank Activity, leave the defaults: MainActivity, activity_main, None, blank Hierarchical Parent, MainActivity. OK, that last MainActivity is your app name under the icon. Change that to something about 10 characters or fewer. Click Finish. (In a later version of Eclipse, you just see three options: Activity Name, Layout Name, Navigation Type. Just leave the defaults and click Finish.)

Add the Basic PhoneGap/Cordova Files

1. In the Project Explorer window of Eclipse, click on the gray arrow to the left of your project name to expand the folders. (If you see the tab in the upper left called Outline, then you are not in the Project Explorer view. Click on the faint icon at the bottom left, then click on Project Explorer. You should now see the Project Explorer tab with your project listed.)
2. Right-click on the assets directory, then on New > Folder.
3. In Folder window, Folder name, type www. Click Finish. You created a new folder in the assets folder.
4. From Downloads/phonegap-phonegap-2dbbdab/lib/android/, right-click on cordva-2.0.0.js and select Copy.
5. In Eclipse, right-click on www and select Paste.
6. In the same way, copy and paste cordova-2.0.0.jar to /libs in Eclipse.
7. In the same way, copy and paste the entire xml directory to /res in Eclipse.
7a. Remove the .jar file from the xml directory.
8. We need to verify that cordova-2.0.0.jar is listed in the Build Path. Right click on the /libs folder and go to Build Path > Configure Build Path…. Then, click on the Libraries button above, click on Add External JARs…, and navigate again to the cordova-2.0.0.jar file in Downloads to add it to the project. You should see it appear at the top of the list. If not, you might need to refresh (F5) the project once again. Click OK to finish.

Update Eclipse Files

1. In Eclipse, Project Explorer, open src/ and navigate to the file. Right-click and Open With > Java Editor.
2. In my Java Developers edition download of Eclipse I have, below my package name:

import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends Activity {

protected void onCreate(Bundle savedInstanceState) {

public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(, menu);
return true;

I changed it to:

/* import; */
import android.os.Bundle;
import org.apache.cordova.*;
public class MainActivity extends DroidGap {
/* Called when the activity is first created. */
public void onCreate(Bundle savedInstanceState) {

(When I created a new project and copied/pasted the above into the file to replace the contents, I got a warning on the super.load line. Eclipse did not like the double-quotes. I highlighted each quote and typed them in again, and the error symbols disappeared.) This line will make the /www/index.html file display when the app starts up. Save the file.

3. Now right-click on AndroidManifest.xml and select Open With > Text Editor.
4. Right above the <application line, copy/paste the following:


<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” />

5. REMOVE all the permissions your app doesn’t need. To learn more about permissions, see

6. Explanatory notes on this page:

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.

Below this is the <uses-sdk> section. For the minSdkVersion, put the lowest version your app is designed to use, such as “8″ for Android 2.2. For the targetSdkVersion, put the number for the highest device you’ve tested it against (my current “Jelly Bean” device would be “15″). If you see a maxSdkVersion, it’s recommended that you leave it blank (according to

(If you started clicking around in Eclipse like I did, you may lose the Project Explorer window. Just go to Window > Show View > Project Explorer to bring it back.)

7. Correction 12/14/12: Support orientation changes by pasting the following right below the “<activity android:name=” line:


Add Your Project’s Assets and Debug

1. Open the folder containing your already-created www “assets” in Finder (your project’s HTML, CSS, Javascript, videos, images, etc., files). With the window side by side with Eclipse, copy/paste or drag all your assets to Eclipse’s /assets/www folder. Make sure “Copy files and folders” is selected.
2. Make sure you reference the cordova-2.2.0.js file in index.html.
3. In Eclipse, select the project name in the Package Explorer and refresh the project (File > Refresh).
4. Right-click on your project name again, and select Validate. It’ll give you (usually useless) messages in a popup. To read a listing of those problems, you can click on the icon at bottom left again and click on Problems. The Problems view opens; click on the down arrow to view them. You can stretch the view to the right to see more details of each line. Ignore the “No grammar constraints” warnings.
5. Back in the Project Explorer view, right-click on your project name again, and select Debug As > Android Application. You’ll see the Console screen at the bottom of the Eclipse environment as it records the activity prior to appearing in the emulator.

When the emulator starts in a separate window, the Console will stop recording and then, a few tabs to the right, LogCat will start displaying the activity. (So when you post a problem for other developers to help, this is where you’ll copy/paste from: the “LogCat” tab.) If you have a working emulator installed, then it will launch and you’ll see the home screen. (Mine took more than a minute before it displayed, so you may need to be patient. Some have had to wait 5-10 minutes!) Drag the “lock” to the side and the app will launch after a while, if all is well. Again, be patient.

Errors I’ve encountered

a. If the emulator does not run, or the console says it is quitting the launch, then do a Project > Clean, and try again. That worked for me.

b. For some reason, my full index.html page did not show in the window. Most of the screen was white with “Hello World!” in the middle. What was overriding my file contents? Answer: I forgot to change the file in Update Eclipse Files section above. That file sets my www/index.html file as the first page to show on startup.  Go back to Update Eclipse Files and follow step 2.

c. When I did a Debug As… Android App, the emulator opened to the home screen, and I dragged the lock to the side to open it, but after a wait, the app did not appear on its own. I clicked on the round Home button, then clicked on the app icon. The alert, “Unfortunately, Launcher has stopped” appeared and my app did not start. In AndroidManifest.xml, I changed the android:targetSdkVersion=”16″/> from 16 to 15, then it opened up normally after I did a Project >  Clean.

Sign the App for the App Store

Apps in the app store must be “signed” with keys. Here are the steps to accomplish this. These steps creat the “apk” file that is uploaded to the app store for download.

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. If you have problems, copy the error into Google and search.
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!] (A later version of Eclipse has the dialog named Keystore selection. Browse to the location to save the keystore and in the same box give the name of the keystore. Back in the Keystore selection dialog, add the password twice and hit Next.)
4. Key [“Private Key”] Creation dialog:
Alias: same as app_name, no spaces.
password of keystore.
validity: 50 [meaning, good for 50 years].
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.]
State: [2-letter abbr. is fine.]
Country: 01. [which is U.S.]
Destination APK file: This is the hard disk location where Eclipse will save the program’s .apk file that you will later upload to Google Play or other app store. Browse, then click Finish when done.

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, making your customers ineligible for any updates.

Perhaps make a separate private key for each app, especially if you expect to sell the rights to an app to someone else. Save the keystore and apk files to a separate location for safety.

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

Test the apk File in Device

1. Check with your device as to how to install the apk file. In my eLocity tablet, it’s a simple matter of copying it to the SD card, navigating to it from Settings, and selecting and choosing to install it. The Google/Asus Nexus 7 does not include an SD card. I downloaded software to the computer and the DropBox app to the Nexus. Once I signed up for an account, I copied the apk file to the computer’s DropBox, then it was accessible on the Nexus. Then I tapped on the file and it asked if I wanted to install. Simple.
2. Once installed, you should see it on the home screen. Check the title underneath to make sure it is not truncated.
3. Tap the icon and check out your work.
4. Make changes to the files as necessary.
5. When you are satisfied, open the project in Eclipse, do a restore (F5), and make your final apk file for upload to your favorite app store.

Debugging: LogCat to the Rescue

If you are still having problems, like your app simply crashes in the device, you may want to go online and post your problem. You may be told, “What does your adb logcat say?” Be ready to give it to them with these steps.

1. Hook up your device to the computer.
2. Prepare your device for debugging by going to Settings > Developer Options (or similar) and turning on USB Debugging and Allow Mock Locations.
3. Right-click on your app name in Eclipse and choose Run As > Android Application. Your application starts to load onto your device. Quickly go to the next step.
4. Window > Open Perspective > DDMS. You should see your device listed under Devices. You’ll see DDMS at bottom left and LogCat at the bottom right. There are your LogCat entries. You should see a drop-down for various filters, such as verbose and error. Choose Verbose. When you app hangs, then drag from the top to the bottom in that field so it’s all highlighted.
5. Click on the 3.5″ floppy drive Save icon (remember those?) to save to a text file. Copy and paste those contents into the forum when they ask for the adb logcat.

Another source for discovering problems: Window > Show View > Debug. Check the Problems tab. This finds the source of your HTML problems, giving filename, nature of problem, and line number of its location in the file – of all the HTML files in the app. (Through this I discovered a misplaced <h3></h3> in many of my pages that I had overlooked.)

Prepare Promotional Artwork

You’ll want to include screen captures for upload to Google Play. Choose screens carefully to present your app in its best light. What if your device doesn’t do screen captures? My eLocity tablet and Google Nexus 7 did not have this native functionality, nor did I find apps made for those devices that performed this function. All is not lost, though; here is what I’ve done.

1. Just double-click the app’s index.html file in Finder to open it in Safari, then narrow the browser window to approximate the device screen proportion.
2. Use your favorite screen grab utility to get the picture.
3. Use GIMP or other photo-retouching program to crop it appropriately.
4. Plug in your device, set it for debugging, and in Eclipse, go to Window > Open Perspective > DDMS. To the left of Devices you’ll see an icon of a camera. Click on that and it’ll take a screenshot. Click on Save to save to file.

Screen sizes needed:
Need at least two images of one of these sizes: 320 x 480, 480 x 800, 480 x 854, 1280 x 720, 1280 x 800
24 bit PNG or JPEG (no alpha)
Full bleed, no border in art
You may upload screenshots in landscape orientation. The thumbnails will appear to be rotated, but the actual images and their orientations will be preserved.
4. Prepare a High Resolution Application Icon for Google Play: 512 x 512 pixel JPG image.
5. Promo Graphic: 180w x 120h PNG or JPG. Also write promo text, 80 chars.
6. Feature Graphic: 1024 x 500 PNG or JPG.
7. Prepare a promo video.
8. If preparing for iPhone: 1024 x 1024px JPG image, and screen grabs.
9. If preparing for Amazon App Store release: 1024 x 500px PNG or JPG promotional image, and screen grabs.
10. If you will create an an ebook version through (this is where Apple gets many of its iBooks from) create a 1400 x 2100px JPG image for the book cover.

Prepare Copy for App Store

You’ll need this information on hand when filling out the form for apk submission in Google Play.

Title (English, 30 characters)
Description (English, 4000 characters maximum)
Recent Changes (English, 500 max.)
Promo Text (English, 80 max.)

Application Type (Applications or Games)
Category (select from a listing)
Content Rating (from “Everyone” to “High Maturity.”)

Phone (optional)
Privacy Policy (URL, optional)

Pricing (Free, Paid)
Default Price USD
Auto price conversion (set prices manually in other countries, or let Google do it for you)

Marketing opt-out (yes/no) Promote or not promote app except in Google Play
Content guidelines (meets Android content Guidelines –
U.S. export laws (adheres to U.S. laws)

[my app did not have in-app products, so the content does not appear under this tab for me]

[Google Cloud Messaging (GCM) is a service that helps you to send data from your servers to your applications. Learn more:]

Ready For Public Release

Congratulations! You are now ready to show off your baby to the world!

To register as a Google Play developer and set up your publisher account, visit the Google Play publisher site:

My Helpful Links page gives a small listing of other sites where you can list your apps. Visit and look under “App Stores.”

3 thoughts on “Cordova 2.2 Android App Creation in Mountain Lion with Eclipse

  1. Hey, hoping someone can give me a shout back. Excellent tutorial, and I’ve made it all the way to launching the app to a virtual device. But, can’t seem to get anything to display on the virtual device emulator but the black Android logo. I’ve waited up to about 8 minutes for something to happen, but no dice. Can someone please reach out to me, I can set up a quick GoTo meeting to try and figure out where I have gone astray. Thank you!

  2. Thank You! My issue was the project name part. “com.Phonegap.Phonegap Phonegap” it needs to have capitals etc. in the same format that eclipse accepts a project name via their GUI or it won’t work.

Leave a Reply

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

You are commenting using your 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