Step by Step Android Development with Cordova and IntelliJ
There are other guides that cover this, but I found them lacking a bit in the step-by-step department for a beginner like myself.
Why IntelliJ? Well first, Google has chosen it as the basis of their Android Studio IDE. And second, Eclipse sucks 😀
Okay, so let’s get started.
Download Pre-Requisites
- Download the Java SDK from here: http://www.oracle.com/technetwork/java/javase/downloads/index.html
- Download IntelliJ IDEA Community Edition from here: http://www.jetbrains.com/idea/download/
- Download and unzip the Android SDK or ADT Bundle from here: http://developer.android.com/sdk/index.html
- Download and unzip the PhoneGap package from here: http://phonegap.com/install/
If you download the Cordova package directly from the Apache site, you’ll have to deal with the build process since it comes as source. It’s just all around easier to get started with the PhoneGap binaries.
Install Java
Follow the standard installation for the SDK, but after you finish, you will want to update your environment settings.
First, add the path to the Java binaries to your Path variable (right click on Computer -> Properties -> Advanced system settings -> Environment Variables).
Find the Path variable and add the path to the bin directory under where you installed the SDK:
Then click on New and add a variable called JAVA_HOME pointing to the directory where the SDK is installed:
If you open a command window and run javac, you should see the following:
If not, you need to double check your settings.
Install IntelliJ
Not much to see here as the install is straight forward. The installer will prompt you to run IntelliJ after it completes.
Create a New Project
Now we can create a new project and select Application Module under Android and then enter a project name and location:
Next, we need to select the Project SDK. Click on the New button to create a new SDK mapping. On your first run, it will prompt you to configure a Java SDK:
Click OK and select the location where the Java SDK was installed (C:\Program Files\Java\jdk1.7.0_04 for me).
Once you select that, you will be prompted to select the location of the Android SDK (E:\Experimental\android\adt-bundle-windows-x86_64-20130911\sdk for me).
It’s the same dialog, so pay attention to the title.
Finally, you will see a dialog prompting you to Created New Android SDK:
When you are all done, it should look like so:
Click Next and click Finish on the final screen:
Set Up Cordova
Now that we have our project set up, we need to hook Cordova into it.
Find the location where you unzipped the PhoneGap binaries and go to lib\android; you will find cordova.js and cordova-2.9.0.jar here.
Under the assets directory in the project, create a directory called www and paste the cordova.js file here.
Under the libs directory, paste the cordova-2.9.0.jar file here.
You need to right click on this file and select Add as Library.
Finally, under the res directory, paste the xml directory from the PhoneGap SDK and your directory should look like this:
Create Content Files
Now we’re ready to create our content files! In the assets\www directory, add an HTML file called index.html:
Now update the HTML file with the following:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Demo Phonegap</title> <script type="text/javascript" charset="utf-8" src="cordova.js"> </script> </head> <body> <h2>Hello Android</h2> </body> </html> |
Locate the file MyActivity.java and paste the following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
package com.example.CordovaExample; import android.os.Bundle; import org.apache.cordova.DroidGap; public class MyActivity extends DroidGap { /** * Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); } } |
You’ll noticed that even though the directory is assets\www, it must be androd_asset/www for the code to work.
According to the official Cordova docs, you need to update the file AndroidManifest.xml file (however, I didn’t need to add it to run it at this stage). You need to paste the following into your AndroidManifest.xml file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.CordovaExample" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="18"/> <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.ACCESS_LOCATION_EXTRA_COMMANDS"/> <uses-permission android:name="android.permission.READ_PHONE_STATE"/> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.RECEIVE_SMS"/> <uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> <uses-permission android:name="android.permission.READ_CONTACTS"/> <uses-permission android:name="android.permission.WRITE_CONTACTS"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.GET_ACCOUNTS"/> <uses-permission android:name="android.permission.BROADCAST_STICKY"/> <application android:label="@string/app_name" android:icon="@drawable/ic_launcher"> <activity android:name="MyActivity" android:label="@string/app_name" android:screenOrientation="sensor" android:configChanges="orientation|keyboardHidden|screenSize"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> </application> </manifest> |
Set Up Virtual Device
Now you’re ready to run! You’ll need to set up an Android Virtual Device (AVD) by selecting Tools -> Android -> AVD Manager:
In this dialog, click on the Device Definitions tab and select Nexus S by Google and then click Create AVD:
Accept the defaults and enter 10 in the SD Card Size. Now you’re ready to build and run.
Build and Run
From the Build menu, select Make Project. Once this completes successfully, click on Run -> Run ‘CordovaExample’.
You should see your virtual device boot up now 😀 (it could take a while…)
The cool thing is that as you update your code and build, IntelliJ will automatically push the changes to the virtual device.
