web and software development musings

Menu

The following post is my account of the installation and configuration of Java 1.7 JDK, Android SDK 4.2, Ant and Phonegap 2.4.0 on Windows 7.

Most of the steps involved are covered by the Phonegap Getting Started Guide for Android guide, however I ran into a few issues requiring me to spend a while problem solving. I have elaborated on the parts the guide doesn’t mention, hopefully this post will save someone a few hours.

I used the the following versions:

Phonegap 2.4.0

Android eclipse-SDK-4.2.1-win32-x86_64

Java JDK 1.7.0_15

Ant 1.8.2 (WinAnt v7)

The following steps were performed on my 4-year-old Toshiba Satellite Laptop. It took some tweaking, but it finally works.

Adding Java to your Windows PATH

You should ensure you specify only the path to the java directory, not the javaw.exe executable itself. In my case I needed to specify the JAVA_HOME system variable. I then added this to my PATH variable, resulting in the following:

JAVA_HOME – C:\Program Files\Java\jdk1.7.0_15

PATH – %JAVA_HOME%\bin;

Step 2. – Install Android SDK and developer tools

Don’t follow the Phonegap guide.

The first step in the Phonegap guide instructs you to download the latest vanilla version of Eclipse, followed by the SDK
and platform tools. Don’t bother. Just download the Android SDK package, then extract everything into a suitable directory. In my case, I created a directory at C:\Development

That’s it, there’s no Windows installation process and no need for the ADT plugin. The SDK package comes with Eclipse and ADT pre-installed, and everything should run nicely.

Add the sdk tools to your Windows PATH

Follow the above steps for adding Java to your path, but append the following to the PATH variable:

C:\Development\sdk\tools;

C:\Development\sdk\platform-tools;

Your directory paths may differ depending on where you have extracted the Android SDK.

Step 3. – Install Ant

The guide doesn’t specifically mention this, only that it needs to be added to your windows PATH. You’ll need to install it first. In my case, I just installed the latest WinAnt.

Add ANT to your PATH

Again using the above steps for adding Java, add the following:

PATH – %ANT_HOME%\bin;

ANT_HOME – C:\Program Files (x86)\WinAnt

Again, your installation path may differ.

Step 4. – Install Phonegap

Download Phonegap and extract into your development directory. e.g. C:/Development/phonegap-2.4.0

Step 5. – Create a project directory

This the directory in which you can store your projects. e.g. C:/Development/projects

After completing the above steps, your Development directory should something like the following (minus the Facebook SDK!):

When you start Eclipse, it may prompt you to save your Workspace location. It’s important that this is outside of your project directory or stuff won’t work.

Step 6. – Create a new project

I just followed the Phonegap guide to create a new project using the Phonegap command line tools:

In a terminal window, navigate to the bin directory within the android subfolder of the Cordova distribution.

Next fire up Eclipse (the executable is in the eclipse directory). Once open, head to: File->New->Project...->Android->Android Project from Existing Code

Select the newly created folder in your projects directory. E.g. “testapp”. You should now see your new Phonegap project in the Package Explorer pane.

Step 7. – Configure the Android Emulator

NB: I have not installed the HAXM Emulator Accelerator as my machine does not support virtualisation. For now I will endure the slow performance.

I experienced problems building and running Phonegap using the emulator with Android 4.2. After installing Android 4.0, I managed to get it running fine. There are various solutions mentioned on sites such as Stack Overflow, but these are outside the scope of this post.

In your C:\Development directory, run the Android SDK Manager.

In the SDK Manager, install Android 4.0 SDK Platform.

Create an Android Virtual Device

In Eclipse head to, Window->Android Virtual Device Manager (VDM)

In the VDM, click “New…” to open the virtual device configuration dialogue. The image below shows a configuration which works well for me. Ensure the “Target” is set to Android 4.0.

Step 8. – Running your application

To run your application, right-click the project folder in the Package Explorer, select Run->As Android Application.

You should see the console log display “Android Launch!” and the Emulator should start.

After the emulator has launched, you might see something like this in the console:

“Waiting for HOME ('android.process.acore') to be launched...”

The emulator may then halt with a blank screen, or display a shiny Android logo.

If this is the case, with the emulator running, Right-click on your project folder and select Run as->Android Application. The console should then report Eclipse uploading your project’s .apk file to the emulator and installing the application. After a few moments, Android should launch with your app installed in the app menu.

Wait a few moments and finally…..

Unlock the emulator by clicking the padlock, hold, drag to the right, and release. You should see your app (or the default Phonegap/Cordova icon) on the apps screen.

Developing your application

You can continue to develop your app whilst the emulator is running. Just right-click and run project again. Eclipse will upload your new .apk version to the emulator. Simply relaunch your app in the emulator.

This is my first foray into Phonegap/Android development, so apologies for any errors or omissions. Hopefully this account has been useful, and will save someone some time.

I actually didnt figure it out and ill be obliged if you explained with a bit more detail :) sorry im new to this!!
you write: “In a terminal window, navigate to the bin directory within the android subfolder of the Cordova distribution.”

Which terminal window is that? i tried in command line but i cant write commands starting with “.”

also you mention cordova distribution..what do u mean exactly??

Im sorry if my questions are a bit stupid, but i just started working with this

Hey no worries. As I stated, I just followed the Phonegap setup guide for this bit (bear in mind instructions for Phonegap 3.0 appear to be slightly different.). If you’re on Windows, use the command line. cd to the Cordova/android/bin folder of the Phonegap files that you downloaded. e.g. cd C:\downloadedfiles\path\to\cordova\android\bin Then just type create C:\Development\projects com.myname.testapp testapp (obviously change the name of the app and paths to meet your needs). See step 4 here: http://docs.phonegap.com/en/2.4.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android