Leverage the Latest Learning Technologies to Overcome Global Training Challenges
Share Twitter Facebook LinkedIn Google+

How to Setup PhoneGap and Create Sample Android App?

Written By

How to Setup PhoneGap and Create Sample Android App?

PhoneGap is an open source mobile application platform that enables you to create mobile applications using HTML and JavaScript. Here I would like to share how to setup phone gap and create a sample android app.

Before setting up phone gap you should have the following software.

  1. Java(jdk-7u2-windows-x64.exe) – Download here
  2. Eclipse(juno) – Download here
  3. Android-sdk_r22.0.5-windows – Download here

You have to install java , Eclipse IDE in your system, and run android-sdk_r22.0.5-windows\android-sdk-windows\SDK Manager.exe

Now open the eclipse folder and run eclipse.exe; then eclipse IDE screen appears.

Step 1. On the eclipse IDE screen go to Help and select “Install New Software” and click on it.

Eclipse IDE Screen

Step 2. Click on “Install New Software”; the following screen appears.

Available softwares screen

Step 3. Click on the “Add “ button and give the Name: ADT Plugin and Location: https://dl-ssl.google.com/android/eclipse/

Adding ADT Plugin Screen

Step 4. On clicking the “OK” button, the following screen appears; select the check box for Developer Tools and from it and clickNext.

Installing Developer Tools Screen

Step 5. In the next window, you will see a list of the tools to be downloaded, and then click Next.

Install Details Screen

Step 6. Select read and accept the license agreements; then click Finish.

Review Licenses Screen

Installing Softwares Screen

When the installation is completed, restart Eclipse.

Once the ADT plugin is installed, you need to install the Android platform and other components. To do that, go to the menu option window->Android AVD manager and select the platform and API level.

AVD Creation Screen

Download the required version of PhoneGap; here you can select Phone Gap 2.0.0.

Android sample app creation:

1. Go to file > New and select “Android Application Project”

Android Application Project Creation Screen

2. Enter the Application name, project Name and package Name.

New Application Creation Screen

3. Click on the Next button and you’ll get the configure project window.

Configure Project Screen

4. Then Configure App Launcher Icon

Launcher Icon Creation Screen

5. Create Activity type

Activity Type Creation Screen

Activity Name Creation Screen

6. Now Sample App files are created.

App Folder Structure Screen

7. Then create two new directories in the root directory of your project:

/libs
assets/www

Copy cordova-2.0.0.js from your phonegap-phonegap-2.0.0-0-g2dbbdab(2)\phonegap-phonegap-2dbbdab\lib\android to assets/www

Copy cordova-2.0.0.jar from your phonegap-phonegap-2.0.0-0-g2dbbdab(2)\phonegap-phonegap-2dbbdab\lib\android to /libs

Copy the xml folder from your phonegap-phonegap-2.0.0-0-g2dbbdab(2)\phonegap-phonegap-2dbbdab\lib\android to /res

Now verify that cordova-2.0.0.jar is listed in the Build Path for your project.Just right click on the /libs folder and go to BuildPaths.

Build Path Settings Screen

8. Click on Configure Build Path… and see in the Libraries tab; add cordova-2.0.0.jar to the project. You need to refresh (F5) the project once again.

Cordova Jar File Verification Screen

9. Go to the src folder and edit the mainActivity.java file

Except package name (package com.commlab.sample;) remove the existing code and paste the below code .

import android.os.Bundle;
import android.app.Activity;
import org.apache.cordova.*;
public class MainActivity extends DroidGap{
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
super.loadUrl(“file:///android_asset/www/index.html”);
}
}

10. Right click on AndroidManifest.xml and select Open With > Text Editor and paste the following permissions between the <uses-sdk…/> and <application…/> tags.

<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” />

11. For Support orientation changes, paste the following inside the <activity> tag.

android:configChanges=”orientation|keyboardHidden|keyboard|screenSize|locale”

12. The final AndroidManifest.xml should look like

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
package=”com.commlab.sample”
android:versionCode=”1″
android:versionName=”1.0″ >

<uses-sdk
android:minSdkVersion=”8″
android:targetSdkVersion=”8″ />

<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:allowBackup=”true”
android:icon=”@drawable/ic_launcher”
android:label=”@string/app_name”
android:theme=”@style/AppTheme” >
<activity
android:name=”com.commlab.sample.MainActivity”
android:label=”@string/app_name”
android:configChanges=”orientation|keyboardHidden” >

<intent-filter>
<action android:name=”android.intent.action.MAIN” />
<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
</application>
</manifest>

13.Create index.html in the assets/www directory and paste the following code:

<!DOCTYPE HTML>
<html>
<head>
<title>Sample</title>
<script type=”text/javascript” charset=”utf-8″ src=”cordova-2.0.0.js”></script>
</head>
<body>
<h1>Android Sample App</h1>
</body>
</html>

14. Right click on the project folder and go to Run As > Android Application; you will get the output on Simulator.

App Run As Screen

Output On Simulator Screen

15. For the installation file, find the sample.apk inside the bin folder.

Now phone gap app is ready to install in your device; if you want to publish this app in Google playstore, read earlier blog “How To Make Zipalign For Android App?”. Have anything to say? Please do share!

View Webinar on Delivering Learning Solutions using Smartphones and iPads

Share
Topics: ,

Subscribe to Our Blogs

Get CommLab's latest eLearning articles straight to your inbox. Enter your email address below:

 
eLearning Learning

Related Posts: