Installing Android 4.2 SDK and Phonegap 2.4.0 on Windows 7 step-by-step

pg_android
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.

Step 1. – Install the Java JDK

I foolishly installed only the JRE. You will need to download and install JDK (x64). This will also install the JRE.

After you’ve installed Java, double check the installation directory. In my case this was C:\Program Files\Java\JDK1.7\bin

Adding Java to your Windows PATH

Hit Winkey+Pause
Select “Advanced system settings” from the sidebar
Hit the “Environment Variables” button.

Environment Variables

Check the “System Variables” section

System variables

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!):

directories

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:

  1. In a terminal window, navigate to the bin directory within the android subfolder of the Cordova distribution.
  2. Type in ./create C:\Development\projects com.myname.testapp testapp then press “enter”

This will create new directory within the projects folder.

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

new_project

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.

sdk_manager

Create an Android Virtual Device

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

vdm_menu

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.

avd_config

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.

emulator_1

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…..

android_launch

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.

About these ads

12 thoughts on “Installing Android 4.2 SDK and Phonegap 2.4.0 on Windows 7 step-by-step

  1. In Step 6 you suddenly start talking about launching something under Cordova, which isn’t mentioned anywhere above.

  2. PhoneGap(Cordova) + Android + Ant on Windows 8 | 현대컴퓨터

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