Follow treslines by email clicking Here!

Friday, December 28, 2012

First PhoneGap App with Android using Eclipse Step by Step on Windows

Hi there! Today i'm gonna show you, how to create your first PhoneGap App with Android using Eclipse on Windows in a few minutes. While searching the web for a "Hello World Project" i found a lot of posts but no one had a good quality or was detailed enough, so anyone could understand it if starting by zero.

So i'm trying to simplify this process as much as possible and give this know how further to you all. Pre-requisite is that you have read and done all the steps from the post: How to install PhoneGap on Windows. So i'll assume you have done those steps and are ready to start.

ATTENTION: In this post we are gonna see a PhoneGap Project (with plain javascript).
If you are looking for an Android App Project (with plain Java) so go to: First Android App Step by Step

We will learn how to:

download and install PhoneGap

create a new Android App Project

change the project from Java to Javascript

prepare the Activity-Class to work with PhoneGap

create a simple index.html file to run on the App

prepare the Manifest-file before running it

to run the App

shortcut all those steps

Download and install PhoneGap

Go to PhoneGap and download the newst version of it and unzip it in any place you want. (at the time i wrote this post it was PhoneGap 2.2.0) I recommend to unzip it in the development directory C:\development as described in the post How to install PhoneGap on Windows. You should see a structure like this bellow.

So before going ahead lets do some changes here. Select the folder phonegap-phonegap-8a3aa47 and press Ctrl+X, go into C\development and paste it here with Ctrl+V and rename it to phonegap-2.2.0 so that you have the new structure as shown bellow. After that delete the empty folder called: phonegap-phonegap-2.2.0-0-g8a3aa47.

Creating a new Android App Project

Ok, now lets create a normal Android App Project first before comming back to this new PhoneGap structure. Start Eclipse if not already running and press Ctrl+N to start the project wizard and create a new project like that: (See picture sequence bellow and don't worry about the details at this point. As soon as we get further we will understand it.)

Thats the result if everything goes fine. At this point this App is still a plain java project. We will change it now to a PhoneGap App in a few minutes. Don't worry about the App name or other properties at this point of the post. We can change everything if we want. Let's keep the focus on the really important setup things we shall know.

Changing the project from Java to Javascript PhoneGap App

First create a new folder called www and a new file called index.html. both in the project folder assets. By me it looks like this:

Ok, that's the interresting part of it. To do this, go back now to the PhoneGap structure we've unzipped in the C:\ directory and look for the android folder in it. By me it looks like C:\development\phonegap-2.2.0\lib\android and then you should see the picture bellow: (locate the points 1) 2) and 3) of it)

Copy now the point 1) 2) and 3) in the project structure the way you see bellow.

Prepare the Activity-Class

Ok we are almost done. Just a few changes before running it. In the eclipse locate the src-folder and open the MainActivity.java class in it and change it that way you'll see bellow: (Ileavethecommentsso you can seewhat I'vechanged)

Prepare the Manifest-File before launching

In the manifest file called AndroidManifest.xml make sure you have inserted the following code in it:(Tip: in order to not do it all by hand, look at C:\development\phonegap-2.2.0\lib\android\example\AndroidManifest.xml and copy/paste it from there.)

Running the App

Select your MainActivity.java file and run it as Android application. (make sure you've an AVD installed as we have seen in the post How to install PhoneGap on Windows) If everything goes well you'll see that picture bellow. Thats all. From here you can now develop your app further.

Setup-Shortcut for the Developers under us

Ok there is a even better way to do this.(I've shown all steps first so wedo notoverwhelmus with to much stoff)Delete the folder www in the eclipse project. Then look into PhoneGap directory C:\development\phonegap-2.2.0\lib\android\example\assets There you'll encounter a sample structure. Just copy it into assets folder like i did bellow instead of doing it by hand. It should look like this if you run it:

What should I change in the "Prepare the Activity-Class"? You mention that you "leave the comments so you can see what I've changed" but I think there's a mistake, since I'm not able to see any comment on that section.

If I copy&paste directly the code into 'MainActivity.java', I get dozens of errors. So I suppose that's not the code we must paste into 'MainActivity.java', right?

with "comments" i mean the code segments i didn't delete in this class. For example as you can see in the section "Prepare the Activity-Class" I have not deleted the commented lines like /* Activity*/ and the next paragraph so you can see what have changed from the original Activity class before going to be the DroidGap class. To remove the errors you may get, press Ctrl+O to organize the needed imports, if you have done all the steps before. This should help.

Same problem as Peter. I replaced the code inside MainActivity.java with the one you provided and I get errors only 2 errors:for the line:import org.apache.cordova.DroidGap;I get:The declared package "" does not match the expected package "com.example.myapp" MainActivity.java /MyApp/src/com/example/myapp line 1 Java Problem

and for the line:getMenuInflater().inflate(R.menu.activity_main, menu);I get:activity_main cannot be resolved or is not a field MainActivity.java /MyApp/src/com/example/myapp line 24 Java Problem

I changed line 1 topackage com.example.myapp;(that is the package name of my app set in first step of new android application wizard)addedimport org.apache.cordova.*;instead the "import org.apache.cordova.DroidGap;"changed the other line to:getMenuInflater().inflate(R.menu.main, menu);

Thanks for your reply Gino Karlo Obiso,yea your right There is no activity_main in R.menu..activity_main is at R.layouti changed to R.layout but still i didn't executes script i don't know why..can you explain clearly cause i am new to this..

hey we can apply .net also to create android app .like making json webservice and calling it from design page go to dis http://stackoverflow.com/questions/16213683/webservice-in-phonegap page u will get an idea

Unfortunately, I'm currently developing pure Android projects at the moment and therefore the focus of my work has shifted somewhat. But as soon as I find time, I will come back to the PhoneGap development, because it interests me a lot. But your error seems nothing to do with the SetUp right.

Thanks a lot for this tutorial. I did every thing as per the instructions but instead of my index.html contents, I am getting "Hello World!" message. Under www folder I have placed index.html and an assets folder containing css and js files.

for those that are having problem with the alert box not shown when executing the app, try to change the code script src="cordova-2.2.0.jswith the version of phonegap you have installed, it worked for me (I didn't notice it before :) )Thank anyway for the tutorial!

PhoneGap is something that let's you develop cross-platform applications without any difficulty. You just have to write one code and then within minutes you have applications for all mobile platforms. It is that easy! I can talk about PhoneGap and not Sencha Touch, I always follow PhoneGap because it is easy to use and reliable. You will do nothing but write code once, and within few minutes you will get mobile applications for all the major platforms within minutes!

PMI’s Project Management Professional (PMP) ® credential is the most important industry-recognized certification for project managers. Recently I went for a PMP prep course by the training provider mentioned above, the instructor was too good and I passed with relative ease. Looking forwards to apply what I learned in PMP class in my company.

Abhishik,Maybe simple question but, everyone says that phonegap is free. but when i want to build it,i have to pay to phonegap-builder. Is there any way to build the app without paying anywhere, and keep my codes locally?

We offer cross platform mobile solutions including SIP dialer to Android Application Development Company worldwide clients. We specialize in the development of business apps for iOS, Android, Windows, and SmartPhones.

Android framework developed owned by Google, Android is software development platform as well as Operating System. Where all types of applications have developed, free of cost due to applications cost is much more less as compares to others.

// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main,menu); return true;}in That activity_main wrriten than display error how to sole this

Hi… by the look of your website I gather that you are a professional. Can you help me make money, blogging? I have a few sample articles. Can I send it to you for your review? I have already begun posting my skills on sites like blog commenting service,creative logo design. Quite a number of buyers have responded. I like to post my blogs on other marketplaces too. Do you have any suggestions?