Getting Started With PhoneGap and Android Studio

Recently I’ve been using PhoneGap as a framework for building mobile apps. What I like about PhoneGap is that if done in the right way I can build an app fairly quickly for almost any mobile device. In this walkthrough I’m going to cover how to get started using PhoneGap with Android Studio:

For more details about PhoneGap see my article covering PhoneGap Fundementals

Step 1 – Install Prerequisites and Tools

The very first step is to install all prerequisites and tools, these are:

1. Install the Java Development Kit: Download the Java Development Kit and install it.
2. If on windows, Set up the JAVA_HOME system variable:
   1. Select Start menu > Computer > System Properties > Advanced System Properties.
   2. Open Advanced tab > Environment Variables.
   3. Add a new system variable JAVA_HOME that points to your JDK folder, for example C:\Program Files\Java\jdk1.7.0_21.
3. Add the JAVA_HOME bin path system variable to the PATH variable:
   1. Select Start menu > Computer > System Properties > Advanced System Properties.
   2. Open Advanced tab > Environment Variables.
   3. Select the PATH system variable
   4. Click edit
   5. Add the following to the end of the variable: “;%JAVA_HOME%\bin”
4. Install Android Studio: follow the instructions on the android site to install android studio.
5. Ensure you have the android sdk tools and platform-tools folder in your PATH variable
   1. Select Start menu > Computer > System Properties > Advanced System Properties.
   2. Open Advanced tab > Environment Variables.
   3. Select the PATH system variable
   4. Click edit
   5. Add the following to the end of the variable: “;%Android SDK%\platform-tools;%Android SDK%\tools” where %Android SDK% is the path to your android sdk location, normally “C:\Program Files (x86)\Android\android-studio\sdk”
6. Download and install NodeJS from the NodeJS Website
7. Install PhoneGap: Install PhoneGap by executing the following command from the command line: “npm install -g phonegap”

Step 2 – Create a PhoneGap Android Project

Next we need to create our PhoneGap project with the android wrapper:

1. Run the PhoneGap create command: Run “phonegap create ProjectPath PackageName ProjectName” where
   • ProjectPath is the path to the folder you want to create (with the PhoneGap Contents)
   • PackageName is the reverse-domain qualified project identifier, e.g. com.codenutz.myapp
   • ProjectName is the name of your project
2. Switch your command line directory to your project directory: Run “cd ProjectPath”
3. Build for the Android platform: Run “phonegap build android” (This is important as it adds the android target to the PhoneGap project)
4. Import your project into Android Studio
   1. Open Android Studio and Choose “Import Project…”
   2. Navigate to the following directory “platforms/android” within your project path.
      
   3. Click OK
   4. Select “Create project from existing sources”
      
   5. Click Next
   6. Enter your project name and click next
      
   7. Next you need to deselect the sources in the CordovaLib directory
      
   8. Click Next
   9. Next deselect the dexedLibs directory
      
   10. Click Next through all the remaining screens and select finish.

You should now be able to compile, run and deploy to android devices inside Android Studio.

Step 3 – Add the PhoneGap www directory into the project

Now if we want to edit the phonegap html, css and javascript files from within Android Studio we need to add the PhoneGap www directory into the project. Do not however that there is no IDE support for these types of file, so Android Studio will effectivley be a glorified text editor:

1. Go to File > Project Structure
2. Select “Modules” in the far left column, and ensure the “Sources” tab is selected in the main pane on the right:
   
3. Click the “Add Content Root” button in the far right column
   
4. Select the “www” folder located directly under your PhoneGap project folder
   
5. Click OK
6. In the pane just to the left select the folder and mark it as “Sources”
   
7. Click OK

Now you should be able to see the www folder within your project structure, allowing you to edit the source files from with Android Studio.

Wrapping Up

One big caveat with this is that when you’re working with your project in this your cannot use the Gradle build system. At this stage it does not appear that the Gradle build system will support the project structure of the PhoneGap project, so converting doesn’t seem toi be an option. I will keep my eye on this and as soon as I can get the project working with Gradle I’ll update this post.

Now that you have a way to work with your PhoneGap in an Android friendly environment, you can start to develop your app!