Today I will walk you through the tutorial which will demonstrate the steps to develop the Android Hello World application.
To Run this tutorial you need Android SDK and Android Emulator. Make sure you have created at least one Android virtual device (AVD). You will also need PhoneGap API. Download the latest copy of PhoneGap. For this tutorial we are only look in the Android development.
Now we have all the required material available to develop First application for Android using PhoneGap First you need to set the Android SDK in Eclips, To do so click on Preferences > Android. Set the Android sdk as shown below.
Next we will create the new project. Click on File > New > Android Project
Now give all required details as shown in the below image to create the project and click finish.
We will require following two files, which was downloaded earlier
1. Android/phonegap-0.9.3.jar
2. Android/phonegap-0.9.3.js
Create libs folder in the project and Place phonegap-0.9.3.jar in it. Also create the www folder within the assets folder and place the phonegap-0.9.3.js in it. (Refer below image)
Next we have to add phonegap-0.9.3.jar in library to access it in the application.
Righ Click on project > properties > java Build Path. In the window click on Add Jars… button to add the phonegap-0.9.3.jar file. Navigate to the location of the jar file and click Ok. This will add your jar file in the library.
Now, create index.html in your www folder and add following code
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h2>Hello World</h2>
<script type="text/javascript" charset="utf-8" src="phonegap-0.9.3.js"></script>
</body>
</html>
As we are using phoneGap, we will require some modification in main App.java file. Open the file and do following changes..
1. Change the class's extend from Activity to DroidGap
2. Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");
3. Add import com.phonegap.*;
Now your class should look like as follow.
package com.shailesh;
import android.app.Activity;
import android.os.Bundle;
import com.phonegap.*;
public class App 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");
}
}
Finally, lets add some permissions to the AndroidManifest.xml file to allow phonegap to run properly.
Open up your manifest and paste the following information after the versionName but before the application tag:
Now your xml should look like this.
Now you can run you project as an Android Application. Right click the project and go to Run As and click Android Application. Eclipse might ask you to select an appropriate AVD. If there isn't one, then you'll need to create it before you can continue.
There you go, you have done your first phoneGap application. It will load on the emulator.
