25 Feb 2014

Creating a PhoneGap App for Android with Intellij Idea

This is a walk-though of the steps to create a PhoneGap App for Android with Intellij Idea. I'm using the latest versions as of this date: PhoneGap 2.9.1, Android SDK 19 and Idea 13.
Thanks to Scott Macdonald for his post on this subject. The high level steps are:

- Install Android API
- Install PhoneGap
- Setup IntelliJ Project
- Run app in Android emulator

Install Android API

Download the Android sdk package from http://developer.android.com/sdk/index.html. Extract only the sdk directory from the downloaded zip (you won't need the Eclipse IDE since we're going to use IntelliJ Idea.

Run the android binary from sdk/tools/android and you'll be presented with the Android SDK installer GUI. You should see four packages suggested for installation. Install these packages. android

When the installation completes, you can exit the android tool.

Install PhoneGap & Build cordova.jar

Go to http://phonegap.com/install and download the latest package. I'm working with version 2.9.1. Extract the zip file to a directory of your choice.

To build the cordova.jar file cd to the framework directory and run the android binary from your chosen android sdk install directory.

cd phonegap-2.9.1/lib/android/framework
~/sdk/tools/android update project -p . -t android-19
ant jar

Setup Intellij Idea Project

Start IntelliJ and do the following:

- File > New Project
- Select AndroidApplication Module in the left hand pane
- Enter the your Project Name
- In the Project SDK click New and select the Android sdk platform you downloaded earlier
- Click Next
- For Target Device select Show device chooser dialog
- Then click Finish

newproj

Create Directories and Copy Files

cordova.js

- Under the projects assets directory, create a new www directory
- Copy the cordova.js file from the phonegap ~/lib/android/cordova.js to the www directory

CORDOVA.JAR

Copy the file from the phonegap ~/lib/android/framework/cordova-2.9.1.jar to the projects libs directory.

config.xml

- Under the projects res directory, create a new xml directory
- Copy the file from the phonegap ~/lib/android/framework/res/xml/config.xml to the new projects res/xml directory.

directory

Add Cordova Library to Project

Select the project name in the browser and click F4 to display the project settings. Choose Libraries in the left pane and then the plus symbol then java to add the cordova library. Browse to the project libs directory and select the cordova-2.9.1.jar file and click OK.

 

Edit MyActivity File

Edit the MyActivity class shown in the screenshot above and add this import:

import org.apache.cordova.*;

Change the class definition line for MyActivity to extend DroidGap instead of Activity:

public class MyActivity extends DroidGap {

Finally, replace the setContentView line with this:

super.loadUrl("file:///android_asset/www/index.html");

Edit the AndroidManifests.xml File

Open the AndroidManifests.xml file shown in the screenshot above and insert the text that follows between the <uses-sdk.../> and <application.../> tags:

<supports-screens
 android:largeScreens="true"
 android:normalScreens="true"
 android:smallScreens="true"
 android:resizeable="true"
 android:anyDensity="true" />
 <uses-permission android:name="android.permission.VIBRATE" />
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <uses-permission android:name="android.permission.READ_PHONE_STATE" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.READ_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Create index.html

In the assets/www directory, create a new file called index.html and paste the following into the file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
 <title>Hello PhoneGap</title>
</head>
<body>
<h2>Hello, this is a very basic Android PhoneGap application!</h2>
</body>
</html>

Running The App

To run the app for the first time, click Debug in Intellij. The first time the emulator is run, you will have to create an AVD file to emulate a device of your choosing. You must then start the emulator and it will typically take several minutes to start the emulator.

Don't continue the Intellij debug session until you see that the android device emulator has brought you to the android main menu.


Tags:
0 comments