<CharlieDigital/> Programming, Politics, and uhh…pineapples

20Sep/13Off

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

  1. Download the Java SDK from here: http://www.oracle.com/technetwork/java/javase/downloads/index.html
  2. Download IntelliJ IDEA Community Edition from here: http://www.jetbrains.com/idea/download/
  3. Download and unzip the Android SDK or ADT Bundle from here: http://developer.android.com/sdk/index.html
  4. 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:

path-var

Then click on New and add a variable called JAVA_HOME pointing to the directory where the SDK is installed:

java-home

If you open a command window and run javac, you should see the following:

javac-command

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:

new-project

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:

new-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:

create-android-sdk

When you are all done, it should look like so:

selected-android-sdk

Click Next and click Finish on the final screen:

finish-project-creation

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:

project-setup

Create Content Files

Now we're ready to create our content files!  In the assets\www directory, add an HTML file called index.html:

create-html-file

Now update the HTML file with the following:

<!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:

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:

<?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:

create-avd

In this dialog, click on the Device Definitions tab and select Nexus S by Google and then click Create AVD:

selected-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.

Posted by Charles Chen

Filed under: Android, Dev, DevTools Comments Off
Comments (0) Trackbacks (0)

Sorry, the comment form is closed at this time.

Trackbacks are disabled.