PhoneGap & Android Studio

Yesterday at GoogleIO, Google announced Android Studio, a new development environment for authoring Android applications. This is a great looking new IDE for Android, based off of IntelliJ IDEA, with some new Android-specific tools and features. You can read more about Android Studio on the Google Android Developers blog.

One of my first tasks upon downloading Android Studio was to get a PhoneGap app up and running in it. Here’s how to get started. Note: I used PhoneGap 2.7 to create a new project with the latest stable release, however you could use the same steps (minus the CLI create) to import an already-existing PhoneGap application. Be sure to backup your existing project before doing so, just in case you have issues (Android Studio is still in beta/preview).

First, follow the PhoneGap “Getting Started” instructions all the way up to (and including) the command line invocation of the “create” script.

01-cmd

Once you have the Java environment configured just run the create script to create a based PhoneGap project. In this case, I used the following command to create a new PhoneGap project:

./create ~/Documents/dev/android_studio_phonegap com.tricedesigns.AndroidStudioPhoneGap AndroidStudioPhoneGap

Next launch Android Studio. When the welcome screen appears, select the “Import Project” option.

02-welcome

Next, you’ll have to select the directory to import. Choose the directory for the PhoneGap project you just created via the command line tools.

03-select existing src

Once you click “OK”, you will proceed through several steps of the import wizard. On the next screen, make sure that “Create project from existing sources” is selected, and click the “Next” button.

04-create from existing src

You will next specify a project name and project location. Make sure that the project location is the same as the location you selected above (and used in the PhoneGap command line tools). I noticed that the default setting was to create a new directory, which you do not want. Once you’ve verified the name and location, click “Next”.

05-project location

On the next step, leave the default settings (everything checked), and click “Next”.

06-import project

Again, leave the default settings (everything checked), and click “Next”.

07-import project

Yet again, leave the default settings (everything checked), and click “Next”.

08-import project

For the last time, leave the default settings (everything checked), and click “Next”. This is the last one!

09-import project

Next, review the frameworks detected. If it looks correct to you, click the “Finish” button.

10-import project

Android Studio should now open the full IDE/editor. You can just double click on a file in the “Project” tree to open it.

11-android_studio

To run the project, you can either go to the “Run” menu and select “Run {project name}”, or click on the “Run” green triangle icon.

12-run

This will launch the application in your configured environment (either emulator or on a device). You can see the new PhoneGap application running in the Android emulator in the screenshot below. If you’d like to change your “Run” configuration profile, go to the “Run” menu and select “Edit Configurations”, and you can create multiple launch configurations, or modify existing launch configurations.

13-running

  • Jan D Schuitemaker

    The create step isn’t needed in Windows?

    For Windows users, this tip might help in cause Android Studio doesn’t show up when you start it: create a environment variable ‘ANDROID_STUDIO_JDK’ that points to your JDK folder.

  • SeanR

    First, thanks for the step-by-step guide. I used this method yesterday and it worked but it’s nice to see that it’s the ‘proper’ way.

    For the real comment – do you know a way to add JavaScript styling to Android Studio? I realize Android Studio is based on IntelliJ for Java, but using it for Cordova means editing JavaScript files. It’d be great to have it recognize .js files and offer similar capabilities to WebStorm. If I could step away from Eclipse I would do it in an instant.

    • http://www.tricedesigns.com Andrew

      I am not aware of a way to add JS support. I’ve tried a few things locally, without success (including trying to pull in the JS plugins from WebStorm). I read in the IntelliJ/JetBrains blog that you have to use IntelliJ IDEA Ultimate for the same features as Android Studio, with JavaScript support: http://blogs.jetbrains.com/idea/2013/05/intellij-idea-and-android-studio-faq/

      • kenyee

        I was wondering where the catch was with the JetBrains support.
        Eclipse is open source so that made sense for Google to stick their plugins in and it supported Javascript natively. Basing Android Studio on IntelliJ Community Edition always made me ask: “so what else do we have to buy eventually?” I should have brought it up in a Google I/O session :-)

  • Michael

    Andrew do you know if this will be significantly better than Eclipse?

  • http://mist.com.au Michael Kelly

    Hi Andrew,
    Can you use the path /Applications/Android Studio.app/sdk/platform-tools and …/tools if you don’t download the sdk separately to Android Studio; and can you build Android alongside iOS without breaking your XCode build?
    (Cordova 2.4.0)
    Currently I get the following msg, but I have followed the step 3A yet.
    An unexpected error occurred: ANDROID_BIN=”${ANDROID_BIN:=$( which android )}” exited with 1
    Deleting project…
    Regards
    Michael Kelly

    • http://www.tricedesigns.com Andrew

      Honestly, I have no idea if that would be sufficient. My gut tells me that it would be fine as long as your classpath is correct, but I do not know for sure.

      • Michael Kelly

        BTW I used:
        export PATH=${PATH}:”/Applications/Android Studio.app/sdk/tools”:”/Applications/Android Studio.app/sdk/platform-tools”
        and the rest of your instructions and it worked perfectly.
        Thanks a lot

  • George

    Thank you, Andrew! Works flawlessly on Mac.

  • Fred G. Vader

    Hi Andrew, I’m confused as to why you would use PhoneGap in Android Studio. I thought PhoneGap was essentially a bridge between hybrid H5/JS apps and the native device features. However with Android Studio you’re building a native app and PhoneGap isn’t necessary (right?). Could you elaborate, thanks!

    • http://tricedesigns.com/ Andrew Trice

      Hi Fred, PhoneGap allows you to build natively-installed apps using HTML as the UI layer. These apps can either have 100% width and height, or can be used as sub-views within larger native apps. Since you are deploying a natively-installed app that has full access to the Android SDK (as exposed to JS), you have to deploy using the Android development tools. This can be done using purely the Android SDK via command line, through Eclipse (with Android SDK), or via Android Studio. Adobe also has PhoneGap Build (http://build.phonegap.com), which is a cloud-based compiler. If you are using Build, you wouldn’t need Android Studio. If you are building the app locally, you could can definitely use it. I hope that helps… feel free to reach out with additional questions.

  • Stephen O’Hair

    Hi Andrew,

    I currently use Aptana (standalone version based off eclipse) as my IDE and build using Maven and PhonegapBuild (as per your guide) plus a ruby script to deploy the cloud-compiled binary to deploy to iOS devices. This is the best setup I could come up with which allows me to build and delpoy to both Android and iOS devices without needing Xcode or Eclipse.

    Is there any IDE that gives Phonegap developers a complete and straight forward development multi-platform build/deploy experience instead of trying to add-on components to tools that weren’t specifically designed for Phonegap? million dollar question I’m sure lol :)

    Keep up the great articles!

    Cheers,

    Stephen O’Hair

  • Carl Nobile

    It seems the latest builds of Android Studio do not recognize any projects built with PhoneGap. When you get to the point where is should find the source files it complains that they can not be found. What’s up with this? Is there a work around?

  • http://www.calbertts.com/ Carlos Alberto Castaño G.

    Thanks!

  • tralala

    nice! for those who have problems getting it to work : install Android Studio and DON’T update it; the version currently provided on Google’s website – which isn’t the “bleeding edge”, but dates from May 2013 – perfectly works with this tutorial, at least on Win 7 (with the necessary Windows-specific adaptations like path settings, etc.)

  • Gizzo

    WOW this was on point it worked first time…thanks very much

  • Olawole Moses Ogunleye

    Thank you so much

  • zjczhjuncai

    I have the same problem and I’m using phonegap 3.0 and Android studio 0.2. Kind of frustrating.

  • Guillaume Bartolini

    Hi Andrew, thanks for for the post it is very helpful. I was wondering if there was any way to debug HTML/CSS/JS on android emulator like it is possible to do with iphone emulator and safari developer mode ..??

  • Prescott Ogden

    I ran into a similar problem while using my npm installation of phonegap. When I downloaded the zip and used that version to create the project, it worked.

  • alina thomas

    Hello,
    It is nice and informative post but i also have one question How to Get a Phone Gap Project to Run in Android Studio with Gradle Build System.

    phonegap application development

  • http://www.au.mobilepundits.com/ Mobile Pundits

    Hi there, thank you for the excellent article, it is really appreciated.

    I’ve been trying to get this working using phonegap 2.7 and the one outlined in the blog article. …I have found this to be the way to go.

    First of all, I’m using I am using Android Studio 0.5.8, with the latest PhoneGap and Cordova 3.4.1

  • alina thomas

    In my opinion using Genymotion makes android development so much smoother and simpler. And you need to install both Phonegap and Cordova with the -g
    switch to do so, but it works great.

    PhoneGap Development

  • http://www.manifestinteractive.com Peter Schmalfeldt

    I have created a Github repo with CSS & JavaScript support for Android Studio. There is even a settings.jar file for easy import. Let me know if there is anything you would like added.

    https://github.com/manifestinteractive/android-studio-filetypes

  • Azizi Musa

    make sure in your “build.gradle” file, contain all this. Only then, you can execute it on emulator or real device.

    // Top-level build file where you can add configuration options common to all sub-projects/modules.
    buildscript {
    repositories {
    mavenCentral()
    }
    dependencies {
    classpath ‘com.android.tools.build:gradle:0.12.+’
    }
    }

    apply plugin: ‘android’

    android {
    compileSdkVersion 20
    buildToolsVersion ’20’

    sourceSets {
    main {
    manifest.srcFile ‘AndroidManifest.xml’
    java.srcDirs = [‘src’]
    resources.srcDirs = [‘src’]
    aidl.srcDirs = [‘src’]
    renderscript.srcDirs = [‘src’]
    res.srcDirs = [‘res’]
    assets.srcDirs = [‘assets’]
    }
    }
    }

    dependencies {
    compile fileTree(dir: ‘libs’, include: ‘*.jar’)
    compile project(‘:CordovaLib’)
    }