Wednesday, August 14, 2013

Creating an Android App with PhoneGap and Eclipse

This is the basics on creating a HelloWorld using PhoneGap, Cordova and Eclipse (provided by ADT).

I have downloaded and extracted:
  1. Android Development Toolkit (ADT): adt-bundle-windows-x86_64-20130729.zip
  2. Phonegap kit: phonegap-2.9.0.zip
Note: ADT provides the Eclipse IDE.

In order to start development, an Android project is created in Eclipse.

Step 1: Create an Android Project
Open Eclipse (Its in the ADT/eclipse folder) and choose File ->New ->Android Application Project

Application Name: Hello World (This is the name that will appear in the Play Store)
Project Name: HelloWorld (This is the name used by Eclipse to separate each project)
Package Name: com.example.HelloWorld

Select the default option for the remainder screens.

Step 2: Insert the Android/PhoneGap Libraries
In the project, left click on assets and create a new folder: www

Open the extracted PhoneGap/lib/android folder and do the following;

  1. Copy PhoneGap/lib/android/cordova.js to Project's assets/www folder
  2. Copy PhoneGap/lib/android/cordova-2.9.0.jar to Project's libs folder
  3. Copy PhoneGap/lib/android/xml folder to Project's res folder
In the Project's lib/cordova-2.9.0.jar right click and choose Build Path ->Add to Build Path

Step 3: Create the starting page
In assets/www folder, create the text file index.html with following contents
 <!DOCTYPE HTML>  
 <html>  
 <head>  
 <title>PhoneGap</title>  
  <script type="text/javascript" charset="utf-8" src="cordova.js">  
  </script>  
  </head>  
  <body>  
  <h1>Hello PhoneGap</h1>  
  </body>  
  </html>  

Step 4: Configure to load the index.html
Edit the Project's src/com.example.HelloWorld/MainActivity.java

Before the first import statement, add
import org.apache.cordova.*;

Change extends Activity 
to extends DroidGap
or to extends PhoneGap

Change setContentView(R.layout.activity_main);
to

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

Step 5: Configure Android specific configurations
Edit the AndroidManifest.xml (if unsure where, just place it before the Activity Application tag)
 <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_CONTACTS" />  

Edit the Activity tag by adding configChanges
 <activity  
  android:name="com.tboxmy.simpledisplay.MainActivity"  
  android:label="@string/app_name"   
  android:configChanges="orientation|keyboardHidden|screenSize" >  

Step 6: Test the application
Right click the project name and choose Run As ->Android Application

Unless you have a fast machine with huge RAM, some waiting time is required for the Application to start, after the Android Emulator starts.

5 comments:

James Albert said...

Nice tutorial. Two (possibly noob) problems I had though were 1) instead of PhoneGap, I had to replace Activity with DroidGap. And 2) Eclipse said that the uses-permission elements should go right after the manifest element so maybe you meant to type "if unsure where, just place it before the Application tag" instead of "Activity tag". But overall, much more easier to follow than other docs. Thanks!

Ramza said...

There's no PhoneGap class, you should substitute the extends Activity whit extends DroidGap

Ankur Sharan said...

Does not work. Crashes the app on load
java.lang.RuntimeException: Error receiving broadcast Intent

Nicholas A S said...

James and Ramza,
Thanks for the comments, will consider them. I notice that there were other custom settings in my setup that allowed me to do the coding as written.

Ankur,
The instructions have work for hundreds of users. You could try a fresh setup and follow steps along with another person.

Thang Huynh Phuoc said...

After create project success, how to add cordova plugins to this project?

Thanks