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:

    C:\>ant
    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%
    C:\Users\asavory\Development\apache-ant-1.8.4
  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/README.md, 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:
    JDK: http://java.oracle.com
    Android SDK: http://developer.android.com
    Apache ant: http://ant.apache.org

    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.

6 Responses to PhoneGap and Android on Windows

  1. Bucky says:

    In the Phonegap – Getting Started With Android Guide it says to install 4 things:
    Download and install Eclipse Classic
    Download and install Android SDK
    Download and install ADT Plugin
    Download the latest copy of Cordova and extract its contents. We will be working with the Android directory.

    Does the ADT Bundle already include the first 3: Eclipse, Android SDK, and ADT Plugin?

    What is the difference for installing Cordova 2.2 vs PhoneGap 2.2? I’m confused because I went to phonegap.com, downloaded the phonegap zip file, then the documentation inside that tells me to download Cordova?

    • Andrew says:

      Hi Bucky,

      The ADT Bundle includes Eclipse, Android, and the ADT plugin. It also includes the platform components for the latest version of Android; if you want to compile for other versions, you’ll need to use in the built-in Android SDK Manager to download each other platform, documentation, etc.

      PhoneGap has migrated to Apache, and so Cordova is the upstream open source project. The PhoneGap and Cordova 2.2 releases should be the same, but I’ve spotted a few differences. The instructions above are based on the download from http://cordova.apache.org/

  2. Ap says:

    Everything worked fine until step 7, building jar:
    C:\Util\Android\cordova-2.2.0\incubator-cordova-android\framework>android update
    project -p . -t android-17
    Updated project.properties
    Updated local.properties
    build.xml: Found version-tag: custom. File will not be updated.
    Added file C:\Util\Android\cordova-2.2.0\incubator-cordova-android\framework\pro
    guard-project.txt

    C:\Util\Android\cordova-2.2.0\incubator-cordova-android\framework>ant jar
    Buildfile: C:\Util\Android\cordova-2.2.0\incubator-cordova-android\framework\bui
    ld.xml

    BUILD FAILED
    C:\Util\Android\cordova-2.2.0\incubator-cordova-android\framework\build.xml:40:
    C:\Util\Android\cordova-2.2.0\incubator-cordova-android\framework\libs does not
    exist.

    Total time: 0 seconds

    Any hints how to proceed? Thanks in advance.