Click here to Skip to main content
15,167,867 members
Articles / Mobile Apps / Android
Technical Blog
Posted 2 Apr 2013

Tagged as


16 bookmarked

Demo of PhoneGap on an Android

Rate me:
Please Sign up or sign in to vote.
4.86/5 (7 votes)
2 Apr 2013CPOL2 min read
Demo of PhoneGap on an Android

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

In this post we will see how to transform simple web application (Html 5, Css3, Javascript) into a native android App using PhoneGap.

First i have a simple web application to show the current location based on your devices Geological position. It was written in simple Html 5, Css 3, and Javascript.

Now i want this to convert into Native App for android. As we are not using PhoneGap Cloud services, we need to use the PhoneGap generic code and will try to transform this simple web form to a Native Android App.

Step 1: Download Eclipse IDE, as we decided to go with Android. Then install Android SDK. Then install ADT package.

As i have been doing Android development also lately, i have everything installed on my Mac.
If its a fresh install for you try following the steps mentioned here. Perform Step 2 only.

Step 2: By this step you would have installed the required software and downloaded the Code sample from PhoneGap.

Step 3: Open Eclipse. Click on Project and Choose "Android Application Form Existing Code Base".

Browse till example folder inside android folder. Rename the App as per your requirement. Check the option to copy to your workspace. This will create a copy of your own version for further modification to host your own app.

Click Finish and the project will be opened in eclispse.

Step 4: Once the Project is loaded, as we check "Copy project into workspace", a copy of code will be copied to the workspace you selected, typically it will be "c:/users/xxxx/documents/workspace" in case of windows. "//xxxxx/documents/workspace" incase of Mac.
Now, go to WWW folder of the workspace copy. Delete all the files inside it and paste your Code files (Html 5 + Css 3 + Java scripts).

Step 5:  Go to res --> values --> string.xml and rename the App. I named it "Where Am I".

Result: We are all set and connect your android phone to laptop. and click on the Run button (Big Green button with > symbol.)

These are the snapshots from my Samsung Galaxy S3, Android Device:

We will see more and more information on PhoneGap in upcoming posts.
This article was originally posted at


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Comments and Discussions

QuestionExceleent Pin
eng moby28-Feb-14 12:51
Membereng moby28-Feb-14 12:51 
GeneralMy vote of 5 Pin
Ștefan-Mihai MOGA10-May-13 19:34
professionalȘtefan-Mihai MOGA10-May-13 19:34 
GeneralMy vote of 5 Pin
Dheeraj Singh Bhadoria19-Apr-13 2:15
professionalDheeraj Singh Bhadoria19-Apr-13 2:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.