PhoneGap is an open source application platform
that enables you to create natively-installed mobile applications using HTML
and JavaScript.
This post assumes that you have installed and configured Eclipse for Android application development and have some know how about Android Native Application development. If not then please follow Getting Started Tutorials first and come later to follow this tutorial.
Now you have configured Eclipse and is ready to develop applications using Android platform. Follow the below steps;
1. Create an "Android Application Project" in Eclipse by clicking File > New
At this point, Eclipse has created
an empty Android project. However, it has not yet been configured to use
PhoneGap. You'll do that next.
3. Download and extract PhoneGap from here
4. Create an assets/www directory and a libs directory inside of the new Android project. All of the HTML and JavaScript for your PhoneGap application interface will reside within the assets/www folder.
5. To copy the required files for PhoneGap into the project, first locate the directory where you downloaded PhoneGap, and navigate to the lib/android subdirectory and copy the files as follows;
- Copy cordova-1.5.0.js to the assets/www directory within your Android project.
- Copy cordova-1.5.0.jar to the libs directory within your Android project.
- Copy the xml directory into the res directory within your Android project
Your project should look like this
6. Next, create a file named
index.html in the assets/www folder. This file will be used as the main entry
point for your PhoneGap application's interface. Let's have a look to
index.html file below
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
</head>
<body>
<h1>Hello PhoneGap</h1>
</body>
</html>
7. You will need to add the cordova-1.5.0.jar library to the build path for the Android project. Right-click cordova-1.5.0.jar and select Build Path > Add To Build Path
8. Open your main application
Activity file. This file will have the same name "MainActivity" by
default. It will be located under the src folder in the project package that
you specified earlier in this process.
9. In the main Activity class, add an import statement for org.apache.cordova.DroidGap:
import org.apache.cordova.DroidGap;
10. Change the base class from Activity to DroidGap; this is in the class definition following the word extends :
public class MainActivity extends
DroidGap {
11. Replace the call to setContentView() with a reference to load the PhoneGap interface from local assets/www/index.html file, which you created earlier
super.loadUrl("file:///android_asset/www/index.html");
your activity should look like this
You have now configured the files
within your Android project to use PhoneGap. The last step is to configure the
project metadata to enable PhoneGap to run.
12. Begin by opening the AndroidManifest.xml file in your project root. In AndroidManifest.xml, add the following supports-screen XML node as a child of the root manifest node:
<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizable="true" android:anyDensity="true" />
Next, you need to configure
permissions for the PhoneGap application.
13. Copy the following <uses-permission> XML nodes and paste them as children of the root <manifest> node in the AndroidManifest.xml file:
<uses-permission android:name="android.permission.CAMERA" /> <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" />
The <uses-permission> XML values identify the features that you want to be enabled for your application. The lines above enable all permissions required for all features of PhoneGap to function
After you have configured application permissions, you need to modify the existing <activity> node.
14. Locate the <activity> node, which is a child of the <application> XML node. Add the following attribute to the <activity> node:
android:configChanges="orientation|keyboardHidden"
15. Next, you need to create a second <activity> node for the org.apache.cordova.DroidGap class. Add the following <activity> node as a sibling of the existing <activity> XML node:
<activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter></intent-filter> </activity>
At this point, your project is configured to run as a PhoneGap project for Android. If you run into any issues, verify your configuration against the example provided at the PhoneGap getting started site for Android.
To launch your PhoneGap application in the Android emulator, right-click the project root, and select Run As > Android Application.
Congratulations! you have developed your first phonegap application for Android platform.