PhoneGap and Android on Windows

It seems there’s quite a lot of confusion on how to get up and running using PhoneGap for Android development on Windows. There’s a Getting Started with Android guide which is comprehensive, but doesn’t seem to resolve all problems. I’ll submit fixes as soon as possible, but meanwhile here’s what I found to work.

This is done on a clean install of Windows 7.

  1. Create a “Development” directory in e.g. your home directory (C:\Users\yourusername\Development). For ease, you might want to drag that folder into the Favorites list in Explorer, too.

  2. Download the Java 7 SDK and install it. You can test it’s installed by clicking on the start menu, typing “cmd” in the search box, hitting enter, then typing “java -version” in the box that appears. If you get “java is not recognized” then something went wrong. If all went well, you should see something like:

    java version "1.7.0_10"
    Java(TM) SE Runtime Environment (build 1.7.0_10-b18)
    Java HotSpot(TM) 64-Bit Server VM (build 23.6-b04, mixed mode)
  3. Download the Android SDK. Nowadays (finally!) Google ship an integrated SDK, which means you don’t need to download quite as many separate bits and pieces. Be sure to grab the “ADT Bundle” rather than the “SDK Tools Only”.

    Follow the installation instructions by unzipping the ADT Bundle to a convenient location (double-click the zip, then drag the enclosed folder into your Development folder). Check it’s working by going into the eclipse folder inside and double-clicking eclipse. You should see the “Android Developer Tools” splash screen followed by a prompt for a workspace directory. The default is probably okay (unless you have another copy of Eclipse installed).

  4. Download Apache Ant. Ant is available by default on a Mac but not on Windows. Install it by extracting the zip file to your Development directory.

  5. Set up your paths for Java, Android, and Ant. Click the Start Menu, right-click Computer, select PropertiesAdvanced System Settings (or click the Start Menu, Control Panel, System and Security, System, Advanced System Settings). Click the Environment Variables button, find “Path” in the System Variables list, and click Edit….

    You need to add the paths for each of the Android platform tools, Android tools, Java bin, and Ant bin directories. You can find these paths by navigating to each of the folders in Windows Explorer, then right-clicking the final folder in the Location bar and selecting “Copy address as text”. For example, the paths for me would be:

    ;C:\Users\asavory\Development\adt-bundle-windows-x86_64\sdk\platform-tools;C:\Users\asavory\Development\adt-bundle-windows-x86_64\sdk\tools;C:\Users\asavory\Development\apache-ant-1.8.4\bin;C:\Program Files\Java\jdk1.7.0_10\bin

    Click Ok, Ok, Ok, then test it by opening a new command prompt and printing the path environment variable:

    echo %PATH%

    You should see something like:

    C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Users\asavory\Development\adt-bundle-windows-x86_64\sdk\platform-tools;C:\Users\asavory\Development\adt-bundle-windows-x86_64\sdk\tools;C:\Users\asavory\Development\apache-ant-1.8.4\bin;C:\Program Files\Java\jdk1.7.0_10\bin

    You can also test by typing:

    android list

    You should see something like:

    Available Android targets:
    id: 1 or "android-17"
     Name: Android 4.2
     Type: Platform
     API level: 17
     Revision: 1
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
     ABIs : armeabi-v7a
    Available Android Virtual Devices:

    And if you type ant, you should see:

    Buildfile: build.xml does not exist!
    Build failed

    Typing javac should show you a long list of usage options.

  6. Now set up the Java JAVA_HOME and Ant’s ANT_HOME environment variables. For example, my JAVA_HOME was C:\Program Files\Java\jdk1.7.0_10 and ANT_HOME was C:\Users\asavory\Development\apache-ant-1.8.4.

    Test JAVA_HOME and ANT_HOME in a new command prompt using echo again:

    C:\Users\asavory>echo %JAVA_HOME%
    C:\Program Files\Java\jdk1.7.0_10
    C:\Users\asavory>echo %ANT_HOME%
  7. Download the latest version of Apache Cordova, and extract it by dragging the folder in the zip file into e.g. your Development directory.

    Extract the Cordova Android component by going in to the newly-extracted Cordova directory, right-clicking on cordova-android, selecting “Extract All…”, and accepting the default location.

    Next, you need to create your cordova.jar. Follow the instructions in incubator-cordova-android/, but basically:

    cd C:\Users\asavory\Development\cordova-2.2.0\incubator-cordova-android\framework
    android update project -p . -t android-16
    ant jar
  8. Test everything is working by creating your first Cordova Android project.

    Copy the location of the cordova-android bin directory by navigating in to it in Windows Explorer, then right-clicking in the location bar and selecting “Copy Address as Text”. Open a command prompt and type “cd”, followed by clicking on the top-left, selecting Edit then Paste. Hit enter. For example:

    cd C:\Users\asavory\Development\cordova-2.2.0\incubator-cordova-android\bin

    Create the project by typing:

    create C:\Users\asavory\Development\HelloWorld com.example.helloworld HelloWorld

    If everything went well, you will see output like:

    C:\Users\asavory\Development\cordova-2.2.0\incubator-cordova-android\bin>create C:\Users\asavory\Development\HelloWorld com.example.helloworld HelloWorld
    Microsoft (R) Windows Script Host Version 5.8
    Copyright (C) Microsoft Corporation. All rights reserved.
    Creating new android project...
    Building jar and js files...
    Copying template files...
    Copying js, jar & config.xml files...
    Creating appinfo.jar...
    Copying cordova command tools...
    Updating AndroidManifest.xml and Main Activity...

    At this point you may see an error about something missing:

    C:\Users\asavory\Development\cordova-2.2.0\incubator-cordova-android\bin>create.bat C:\Users\asavory\Development\HelloWorld com.example.helloworld HelloWorld
    Missing one of the following:
    Android SDK:
    Apache ant:

    If this happens, double-check that you have set all of the environment variables correctly. Again:

    • PATH should include Android’s platform-tools and tools directories, the JDK bin directory, and the Ant bin directory.
    • JAVA_HOME should point to the JDK directory
    • ANT_HOME should point to the Ant directory
  9. You can now import your project into Eclipse by clicking on New, then selecting Android Project from Existing Code. You will need to set up an Android Virtual Device before you can run it in the emulator.

    If you see errors in Eclipse along the lines of DroidGap cannot be resolved then check you correctly created the cordova.jar in the “installing Cordova” step above.

Hopefully you should now be able to work with PhoneGap and Android on Windows.

Problems, errors, omissions, enhancements? Let me know. As soon as I get a chance, I’ll submit fixes to the official documentation.

This entry was posted in Computing, Mobile Tech, Planet, Research, Technology and tagged , , , , , , , . Bookmark the permalink.