Android, Intellij IDEA and PhoneGap: Getting Started


An update to this post covering Intellij IDEA 12 CE is located here.

A few months ago I wrote a review of JetBrain’s WebStorm IDE, which is my new favorite IDE. Yet even after discovering WebStorm, I continued to slog through Eclipse for Android apps. Well WebStorm has a Java clone, IntelliJ IDEA. And it is way better than Eclipse. It isn’t that Eclipse is a bad IDE. It is just that IntelliJ IDEA is so much better than it. Even running on my quad-core Macbook with a SSD drive and 8 GB of RAM, Eclipse felt sluggish, but IntelliJ IDEA feels like I have the afterburners on full.

The main problem with using IntelliJ IDEA is that most Android stuff assumes that you are using Eclipse and it takes a bit of poking around to figure out how to do the something in IntelliJ IDEA. Case in point, PhoneGap. All of the tutorials I’ve read so far, and ones that I have written, are for Eclipse. Well here is how to get the PhoneGap, hello world app running in IntelliJ IDEA. This tutorial was written for the Mac version, but from what I can tell from JetBrains website, the PC and Linux version are nearly identical. 


Big thanks to the PhoneGap team, this tutorial borrows heavily from their Getting Started with Android page. For more information about IntelliJ IDEA please visit JetBrains website.



  • From the IntelliJ IDEA start page click Create New Project

  • On the New Project dialog box
    • Select Create project from scratch
    • Then click Next

  • In the Project name: type HelloCordova
  • Select type: Select Android Module
  • Click Next

  • Select Create source directory, make sure the relative path is src
  • Click Next

  • Make sure that Android SDK: shows Android SDK
    • If not use the ellipsis button to set the location of your Android SDK
  • Make sure that Application is selected and that all of the settings are correct for your needs
  • Click Finish

  • IntelliJ IDEA will now create your application
  • Create a new subdirectory of the /assets directory: www
  • Copy cordova-1.9.0.js to the directory /assets/www
  • Copy cordova-1.9.0.jar to the directory /libs
  • Copy the entire xml directory to /res

  • Right-click cordova-1.9.0.jar and click Add as Library…Make sure that:
    • Name: cordova-1.9.0
    • Level: Project Library
    • Add to module: HelloCordova
    • Click OK

  • Edit the MyActivity.java file
    • Add the following import: import org.apache.cordova.*;
    • Replace the class’s extend from Activity to DroidGap
    • Replace setContentView()
      with
      super.loadUrl(“file:///android_asset/www/index.html”);

  • Open the AndroidManifest.xml
  • Paste the following between the and tags


<supports-screens
   android:largeScreens=”true”
   android:normalScreens=”true”
   android:smallScreens=”true”
   android:resizeable=”true”
   android:anyDensity=”true” />

















  • Paste the following inside of the tag


android:configChanges=”orientation|keyboardHidden”

  • Your AndroidManifest.xml file should look like:



  • RIght-click the www directory
  • Hover over New, the click HTML File
  • In Name: enter index
  • In Kind: select HTML5 file
  • Click OK


  • Paste following code into the file:





Cordova
http://cordova-1.9.0.js


Hello World




  • Deploy your app to the emulator by clicking the Run selected configuration button, the green triangle next to the drop down which should say HelloCordova



And that’s it. In a short while your app should start running on the emulator. Hey if you like 


http://ws.amazon.com/widgets/q?rt=tf_cw&ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Fronco-20%2F8010%2F34c4e293-16aa-4cdf-8038-60405588f045&Operation=GetDisplayTemplate Amazon.com Widgets

Advertisements

21 thoughts on “Android, Intellij IDEA and PhoneGap: Getting Started

  1. I would need to see how the project structure of your application is. It should have the following:
    (root)
    — assets
    — www
    — index.html

    Meaning that at the project root there is a directory: assets, which has a subdirectory: www, which has a file: index.html

    Like

  2. It's worth mentioning that you need IntelliJ 10 or greater:

    “IDEA 9 was released long time ago and doesn’t support the new format of Android SDK distribution which as changed recently, please download and use IDEA 10.5.2” – IDEA support

    Like

  3. thanks for the good tutorial but I recently installed intellijidea community edition 12.1.4 and I do nor see a javascript debugger neither javascript syntax highliter. Any solution ?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s