Getting Started With PhoneGap and Android Studio

2 Flares Twitter 0 Facebook 0 StumbleUpon 1 Google+ 0 LinkedIn 1 2 Flares ×

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:

Android Studio & PhoneGap

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.
      Android Studio Import PhoneGap Path
    3. Click OK
    4. Select “Create project from existing sources”
      Android Studio Import PhoneGap Create Project
    5. Click Next
    6. Enter your project name and click next
      Android Studio Import PhoneGap Project Name
    7. Next you need to deselect the sources in the CordovaLib directory
      Android Studio Import PhoneGap Sources
    8. Click Next
    9. Next deselect the dexedLibs directory
      Android Studio Import PhoneGap Libraries
    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:
    Android Studio Import PhoneGap Add WWW Folder
  3. Click the “Add Content Root” button in the far right column
    Android Studio Import PhoneGap Add Content Root
  4. Select the “www” folder located directly under your PhoneGap project folder
    Android Studio Import PhoneGap Select WWW Folder
  5. Click OK
  6. In the pane just to the left select the folder and mark it as “Sources”
    Android Studio Import PhoneGap Mark As Source
  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!

  • Rashid Omar

    Very useful indeed. Thanks

  • Eric Huang

    Thanks for sharing this!!

  • stvo

    Thanks. very useful. most articles out there are outdated.

  • Mei

    Great article, I’ll be using this soon. What difference does using the Gradle build system make?

    • Mostly just that gradle is the main build engine moving forward for android projects. There’s also a couple of other things like referencing maven repositories and running from the command line feel much more natural with the maven build system.

  • RJ

    This doesn’t work anymore btw. With latest Android Studio, when you try to import the phonegap from by going to platforms->android it tells you it cannot import anything from that location.

    • Thanks for letting me know. I’ll take a look into it and get the article updated

  • Bhushan

    Matt, this is the best tutorial ever for working on your PhoneGap project in Android Studio. Very well done! your article was very helpful, straight forward and easy to understand. Cheers!

    • Thanks for the kind words Bhusan, really appreciate the encouragement and glad it has been of help.

  • JJK

    I’m having the same problem as RJ. This tutorial doesn’t seem to work anymore. An update would be greatly appreciated!

    • Hi jjk,

      It looks like a recent update to android studio may make it completely unworkable. You can no longer import projects ‘in-place’, which is essential for phonegap projects.

      I am looking into this, but am at a bit of a loose end at the minute.

  • Erik

    Matt, thx for your instructions. Fwiw, I just used them to successfully set up a vanilla IntelliJ, eg IntelliJ CE (v 13.1.1), project.

    • Really glad it helped Erik, thanks for the feedback!

  • Valerie

    Hi, just to help:
    The tutorial is still valid except that no special steps are required anymore. To start a cordova project:
    $ cordova create hello com.example.hello “HelloWorld”
    $ cd hello
    $ cordova platform add android

    Do not build the project yet.

    then “import projects” in android studio and choose the hello directory (not the android directory).

    Leave all settings as preselected (so do not exclude the CordovaLib files!!) and you are ready to go!

    • Thanks Valerie – I’ll give this a go and update the article. Thanks for your help!

      • gt

        Hi,

        thanks for this post

        Unfortunately the above comment doesn’t work because cordova was replaced by phonegap, which has no platform add command.

        The guide itself is not working for me because I suppose you should also uncheck at Step 2g one of “…\platforms\android\gem” or “..\platforms\android\src” because otherwise you will get a “com/phonegap/helloworld/R.java:10: duplicate class: com.phonegap.helloworld.R” error when compiling

        • Jack

          Hi gt,

          It’s possible to have both Phonegap and Cordova installed. In fact, Cordova is still the core of Phonegap, and it is actually a more recent version (3.4.1) when you install it. Both command options do still work.

          I’ll try the steps mentioned above and see how it works out, then let you know.

          🙂

          • I’d be really interested to see this – I didn’t realise you could run the cordova commands with the phonegap projects. I just assumed it’d cause a problem!

          • Geekoid

            Hi Matt,

            Jack here.

            I created a new project in Eclipse using new Cordova/Phonegap code, then I tried to perform an export from Eclipse and it promptly notified me that I can just do the import directly from Android Studio.

            I did this, choosing the import option on the Android Studio startup screen, and it converted it to a Gradle project that appears to build without a hitch. Also, using Genymotion as my virtual Android device means it runs like warm butter as well!

            It seems an Eclipse project automatically sets things up nicely for Gradle, and it only takes a few minutes to do. It would be nice if they could set things up so a Phonegap project can be directly imported into the new Gradle build system, but I suppose they’ll get to that eventually.

            If you don’t want or need Gradle, Android Studio will import the project just fine and build without using Eclipse too.

          • That’s great Jack, thanks – I’ll look at updating this article with your findings. I guess they’ll set the direct import to the new gradle system up once android studio is out of beta, if that ever happens!

            I’ve been using Genymotion too – makes android development so much smoother!

          • mike warnes

            Hi there, I’ve been trying to get this working using Valerie’s approach and the one outlined in the blog article. …sadly, as a c# developer I’m not that familiar with this project template so I’m pretty much out of my depth here, however….I’m using Android Studio 0.5.8. The problem I’m seeing is after selecting the import option in Android Studio there are no further options to select directories from the build, or to deselect the dexed libraries….. Has anyone had a chance to runthrough this tutorial with the latest Android Studio maybe?

          • Thanks mike, this is great information

          • Tipo

            Nice tutorial. But I have to say at Android Studio 0.8.2 it won’t work anymore.
            Can you please try it with that new version again?
            I do exactly what here is written but no chance to run the default app.
            The import was no problem but when I try to run the AVD it always says that there is no “module specified”.
            So I stuck here. I also tried to use “Build -> make Module ‘android’ ” but this ends with an error.

            Even the main tutorial here won’t work anymore with the new version of phonegap/cordova 3.5 and the new Android Studio 0.8.2.

            Maybe you will rewrite your article because there is no other outside. 🙁

        • Jack

          You need to install both Phonegap and Cordova with the -g switch to do so, but it works great. It also seems to import without problems, but still testing that. There’s even an option to migrate to Gradle, but I’ve not tested that yet. I’ll get back to you with my findings.

    • wLEKIN

      thank you, it work!

    • Jobin

      Thanks alot Valerie . your valuable suggestion has worked for me. But built deprecation warnings

      D:PhonegapRepostorelocatorplatformsandroidCordovaLibsrcorgapachecordovaCordovaChromeClient.java

      D:PhonegapRepostorelocatorplatformsandroidCordovaLibsrcorgapachecordovaConfigXmlParser.java

      D:PhonegapRepostorelocatorplatformsandroidCordovaLibsrcorgapachecordovaCordovaActivity.java

      D:PhonegapRepostorelocatorplatformsandroidCordovaLibsrcorgapachecordovaIceCreamCordovaWebViewClient.java

      D:PhonegapRepostorelocatorplatformsandroidCordovaLibsrcorgapachecordovaLinearLayoutSoftKeyboardDetect.java

      any suggestions on how to update these?

    • disqus_wfQmyPFGLY

      Thanks Valerie!

  • tom

    hi

    I try to import a cordova project, with this tutorial

    but at the fifth step, I have this message:
    Directory ‘me…../platforms/android’ is not writable! Please choose another project location.

    I’m on OS 10.9

  • realtebo

    you missed ant installation

  • Gaurav J

    Hi,

    I followed the step 1 but I have created Android_SDK system variable and then used as %Android_SDK% before my path.

    At the step 2, I used “phonegap create ProjectPath PackageName ProjectName”, but nothing has happened. Only ProjectName/.cordova folder has been created. Do please help me out from this?

  • Wow.. Great This is the Awesome installing Tutorial. Thanks Good Steps..

    Hospital Management System

  • satendra singh

    Thanks it worked , but still I am struggling to use gradle wrapper to build cordova project in android studio.

  • suresh kumar

    Hi i’m done all environment setup correctly, and it’s not showing error too
    But android build files not created in this folder tree
    please check the image below

  • This is interesting. Great ideas.. Awesome Thanks.

    Buy Cycles Online

  • Syed Umair Umer

    What I click on “Import Project” in Android Studio and select the “platforms/android” folder for the app, it opens a pop up asking some question regarding Gradle instead of opening the “Import Project” window. That’s really strange and this is why I am stuck.

  • onigetoc

    Why in 2015 we need to do comand line?

    • Mehmet Özgür Bayhan

      Because Command Line is not related with year.

  • thanks man
    the key is to build it then select the Android folder

    • Niko

      Hi, do you maybe know the reason the app is not loading in Emulator? Everything else seems to be good! Thanks a lot!

  • How can i run the app in the emulator after adding the www folder
    are any more changes required to be done
    any help will be appreciated?

  • Very useful tutorial thanks. Hoping I can now more easily compile to –release etc

  • Krishna vrinsoft

    Thanks a lot. It’s really too helpful

  • John Alert

    Thanks for your very easy explanation

  • Surinder Singh

    can you please provide me detail how i can add phonegap plugins in application this application..?

The Essential App Marketing Kit
Subscribe To My Newsletter To Get an Entire Chapter From The Book for FREE
Never display this again
2 Flares Twitter 0 Facebook 0 StumbleUpon 1 Google+ 0 LinkedIn 1 2 Flares ×