How to Develop Phone Gap Android applications in an easy way

| Posted by Indies in Android, Mobile App | 675 views

GD Star Rating

Phone Gap is one open source platform for mobile development which provides functionality to build mobile applications using HTML, JavaScript and CSS3 instead of other device specific languages. The Phone Gap application is hybrid means they can’t be said fully native or fully web based. It allows you to create natively installed mobile application using HTML and JavaScript. Here is the guide for android users on how to set up the environment to develop phone gap android applications in eclipse. You should have eclipse IDE installed in your computer with support of android SDK and ADT plug-in.

  • Download and install Phone gap
    • The first step is to download and set up Phone Gap. It is available on
    • Extract archives in any local directory of your choice on your computer system for future use.
  • Configure phone gap with your project
    • Create android application project in your workspace. At this point eclipse has created empty android project which is not configured to use phone gap yet.
    • Create www directory in assets folder of your project as shown in the following image. All the HTML and JavaScript content will be put in this directory.


  • Now you have to copy the required phone gap files in your project so locate the directory where you have extracted archives of downloaded phone gap and navigate to lib/android sub directory.
  • Copy the cordova.js file in your assets/www folder.
  • Copy cordova-2.9.0 jar file to your libs folder.
  • Copy the xml directory to your project’s res directory.


  • Next, create one file named index.html in assets/www folder and put following code in that file. Index.html is the main file where you can put all the code of html and JavaScript.


  • You will require to add cordova-2.9.0 jar file for your project. Right click to cordova-2.9.0->build path->add to build path.
  • Update your  activity class
    • Open your main activity class file under the package you have specified in the package name while creating the project.
    • In main activity class file add the import statement import org.apache.cordova.Config;
    • Change the base class Activity to DroidGap using extends i.e.public class MainActivity extends DroidGap {
    • Replace the call to setContentView() with the reference to load the Phone Gap interface from the local assets/www/index.html as shown below.


  • Configure the manifest file
    • In the manifest file add the support-screen node in the root manifest node.


  • Add necessary permissions like camera, internet, external storage etc. in <user-permission> node.
  • Now run the application as normal android application in emulator or device. It will display the output as per your index.html file.

We hope that this effort of ours proves to be helpful to all android users for developing phone gap android applications.

Post your comments to let us know.

Thank You.

GD Star Rating

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>