Android Core

Getting started with PhoneGap in Eclipse for Android

Android development with PhoneGap can be done in Windows, OS X, or Linux

Step 1: Setting up Android Tools

ADT Bundle – Just a single step to setup android development environment

Step 2: Downloading and installing PhoneGap

  1. Visit the PhoneGap download page and click the orange Download link to begin the download process.
  2. Extract the archive to your local file system for use later.

You are now ready to create your first PhoneGap project for Android within Eclipse.

Step 3: Creating the project in Eclipse

Follow these steps to create a new Android project in Eclipse:

  • Choose New > Android Project

  • On the Application Info screen, type a package name for your main Android application .This should be a namespace that logically represents your package structure; for example, com.yourcompany.yourproject.

  •  Create New Project In Workspace and Click Next.

  • Configure Launch Icon and Background

  • Create Activity

Configure the project to use PhoneGap

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.

  • 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

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

  • Copy cordova-2.7.0.js to the assets/www directory within your Android project.
  • Copy cordova-2.7.0.jar to the libs directory within your Android project.
  • Copy the xml directory into the res directory within your Android project
  • 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.
  • In index.html, add the following HTML code to act as a starting point for your user interface development:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
</head>
<body>
<h1>Hello PhoneGap</h1>
</body>
</html>
  • You will need to add the cordova-2.7.0.jar library to the build path for the Android project. Right-click cordova-2.7.0.jar and select Build Path > Add To Build Path

Update the Activity class

Now you are ready to update the Android project to start using PhoneGap.

  • Open your main application Activity file. It will be located under the src folder in the project package that you specified earlier in this process.

For my project, which I named HelloPhoneGap, the main Android Activity file is named MainActivity.java, and is located in the package com.maanavan.hellophonegap, which I specified in the New Android Project dialog box.

  • In the main Activity class, add an import statement for org.apache.cordova.DroidGap:
import org.apache.cordova.DroidGap;
  •  Change the base class from Activity to DroidGap ; this is in the class definition following the word extends
public class MainActivity extends DroidGap
  •  Replace the call to setContentView() with a reference to load the PhoneGap interface from the local assets/www/index.html file, which you created earlier
super.loadUrl(Config.getStartUrl());

Note: In PhoneGap projects, you can reference files located in the assets directory with a URL reference file:///android_asset, followed by the path name to the file. The file:///android_asset URI maps to the assets directory.

Configure the project metadata

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.

  • Begin by opening the AndroidManifest.xml file in your project root. Use the Eclipse text editor by right-clicking the AndroidManifest.xml file and selecting Open With > Text Editor
  • 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:resizeable="true"
android:anyDensity="true"
/>

The supports-screen XML node identifies the screen sizes that are supported by your application. You can change screen and form factor support by altering the contents of this entry. To read more about <supports-screens>, visit the Android developer topic on the supports-screen element.

Next, you need to configure permissions for the PhoneGap application.

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.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <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 built your application, you may want to remove any permissions that you are not actually using; this will remove security warnings during application installation. To read more about Android permissions and the <uses-permission> element, visit the Android developer topic on the uses-permission element..

After you have configured application permissions, you need to modify the existing <activity> node.

  • 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|keyboard|screenSize|locale">

Android Manifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.maanavan.hellophonegap"
    android:versionCode="1"
    android:versionName="1.0"
     >  <supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:xlargeScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
        />
 
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
 
    <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.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <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.maanavan.hellophonegap.MainActivity"
            android:label="@string/app_name" >
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

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.

Running the application

To launch your PhoneGap application in the Android emulator, right-click the project root, and select Run As > Android Application

If you don’t have any Android virtual devices set up, you will be prompted to configure one. To learn more about configuring Android emulator virtual devices

Eclipse will automatically start an Android emulator instance (if one is not already running), deploy your application to the emulator, and launch the application

 


Reference: Getting started with PhoneGap in Eclipse for Android from our JCG partner Sathish Kumar at the Maanavan blog.

Sathish Kumar

I am working as a Subject Matter Experts for Mobile Web. I have a very good passion for new technologies which induces me to share my knowledge with others. As a result of this, I have prepared tutorials which could be easily understandable by anyone and give you better vision on each topic of technologies. My expertise is in Java/J2EE technology. In recent years, I mainly worked in Mobile Web Platform. I am also the founder of MaanavaN.com
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

16 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Srikanth Rao
10 years ago

ERROR : Config cannot be resolved

Kumar
Kumar
10 years ago
Reply to  Srikanth Rao

check your application android manifest xml file

Kumar
Kumar
10 years ago

Very nice presentation

nilesh
nilesh
10 years ago

dude dont just copy paste from here n thr.. use the post as base and write updated instructions with screenshots.. for blog visitors the original post can be found at http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android.html

raj
raj
10 years ago
Reply to  nilesh

but this article clear and neat

fuat
fuat
10 years ago

very helpfull thank you

Prasenjit
Prasenjit
10 years ago

Very nice tutorial.Good presentation……………..

nanthini
nanthini
10 years ago

its really helpful… finally i got the output… thank u so much

kamesh
kamesh
10 years ago

hi sir. … frist of all thanks for uploading these basic code and it was working now.. i request you to upload any other examples like how to get values and how to evaluate it

Vishnu
Vishnu
10 years ago

its really helpful

JayaRam
JayaRam
9 years ago

Its really useful for beginners.

dhaval
dhaval
9 years ago

nice job
any more examples of phonegap in android than post it
Thanks

Rakesh Tiwari
9 years ago

Informative post for phonegap beginners developers
Thanks for sharing helpful tutorial.

dinesh
dinesh
9 years ago

when i add cordova to build path ,, i receive an error in main activity

Anirudh.B.S.
8 years ago

How to integrate admob for this phonegap project?

Pete
8 years ago

Hi! You probably have the best set of instructions on the web BUT it’s outdated. 1) Your link to the phonegap download is now an install page and there is no download from there. 2) You have a whole lot of broken image links (apparently all of the tutorials images): PhoneGap-Tutorials-1.png – PhoneGap-Tutorials-10.png 3) eclipse requires some configuration to get the ADT to show up in the menus 4) when you say “install” you should be very clear about where… so much time gets wasted installing stuff in the wrong path. 5) Apparently Android will no longer make a plugin… Read more »

Back to top button