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: (I leave the comments so you can see what I've changed)

import org.apache.cordova.DroidGap;

import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends /* Activity */DroidGap {

    // @Override
    // protected void onCreate(Bundle savedInstanceState) {
    // super.onCreate(savedInstanceState);
    // setContentView(R.layout.activity_main);
    // }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

} 

Content of Index.html

Ok now copy paste this HTML-Code into the index.html file we've created in the assets-folder.
<!DOCTYPE HTML>
<html>
  <head>
    <title>First App</title>
  <script src="cordova-2.2.0.js"></script>
  <script>
     function onLoad(){
          document.addEventListener("deviceready", onDeviceReady, true);
     }
     function onDeviceReady(){ navigator.notification.alert("PhoneGap is working!!");
     }
  </script>
  </head>
  <body onload="onLoad();">
       <h1>Welcome to PhoneGap</h1>
       <h2>Edit assets/www/index.html</h2>
  </body>
</html>

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 we do not overwhelm us 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:




Another good short-cut the youtube video PhoneGap Android Tutorial.
That's all. Now let's develop some "real" PhoneGap Apps. ;-)) Have fun!

Advertising:
Optimized bets for playing EuroMillion's lottery on your Mobile Phone! 



80 comments:

  1. Thanks for helping me to create my first PhoneGap app for Android. This is really an amazing post.

    ReplyDelete
  2. Very very nice post. Thanks for helping me build my first app with phonegap :D

    ReplyDelete
  3. Really nice blog. I loved the content of your blog. I daily search articles and study for a web design company. I found your blog useful and interesting. Thanks for posting.

    ReplyDelete
  4. 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?

    Thank you very much.

    ReplyDelete
    Replies
    1. Hi Peter

      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.

      regards,
      Ricardo

      Delete
    2. 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

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

      Mot that it works now, but at least it doesn't give Java errors.

      Delete
  5. Thanks for the clean explanation.. This website http://www.compiletimeerror.com/2012/12/creating-first-androidapplication-in.html also addresses something similar.. Have a look, may help..

    ReplyDelete
  6. good post helped me lot for learning phonegap

    ReplyDelete
  7. Clear and complete!
    Thanks for a good post.

    ReplyDelete
  8. Hi this is amar...
    Thanks for giving great demo its very useful for me....
    one problem in my application..script code is not working properly alert box is not coming when start my app..

    ReplyDelete
  9. There is no activity_main in R.menu..
    activity_main is at R.layout

    ReplyDelete
    Replies
    1. Thanks for your reply Gino Karlo Obiso,
      yea your right There is no activity_main in R.menu..
      activity_main is at R.layout
      i 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..

      Thanks,
      amar

      Delete
    2. Hi ,
      It is true that there is no activity_main in R.menu..
      activity_main is at R.layout.
      Thank you very much.

      But still the alert box is not opening. Can you please explain why? I think Tahir Mahmood is also having the same problem.

      Delete
  10. it really really help thank you :)

    ReplyDelete
  11. do u have any idea how to work with databases in phonegap..i need an simple application which can deal with databases..thank you

    ReplyDelete
    Replies
    1. 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

      Delete
  12. Ricardo Ferreira, I would like to give you a kiss. <3
    This helped me, you saved my life after giving up.

    ReplyDelete
    Replies
    1. Hi Sam,

      Only if you are a girl.... ;-))) just kidding! :-)
      I am very pleased that it has helped you. You're welcome! Have fun!

      regards,
      Ricardo

      Delete
  13. I am getting "There was a network error"could you please help me with this

    ReplyDelete
  14. Hi Bala,

    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.

    hope you get a solution for it out there.

    regards
    ricardo

    ReplyDelete
  15. Hi Bala, could that be due to this line
    super.loadUrl("file:///android_asset/www/index.html");

    where if you mistype it as file://

    Btw,
    Thanks for post Ricardo.


    Regards,
    Rw

    ReplyDelete
  16. Great head start to creating a Phonegap application. Very clearly explained.

    ReplyDelete
  17. this code is not showing alert dialog

    ReplyDelete
    Replies
    1. check to see whether you have copied the config file

      Delete
  18. I was looking for a way to understand how to develop applications using Cordova; your post have been really helpful to me. The linked video tutorial is a real help too.
    Thanks a lot ! :)

    ReplyDelete
  19. Great article to kickstart the Phonegap application development
    Thanks a lot:)

    ReplyDelete
  20. how to copy paste your HTML code in my index.html page. idont know i came from java and dont know about html and all think

    ReplyDelete
  21. This is great tutorial. Specially thanks for mentioning about short cuts at last

    ReplyDelete


  22. How to call java methods in html or js...?

    ReplyDelete
  23. Thank You very much.. I really lost my hope at first. Thanks once again. :)

    ReplyDelete
  24. i m getting the error R can be resolved to a variable in MainActivity.java
    how to clear it? help me pls..

    ReplyDelete
  25. Hi,

    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.

    Request you to guide.

    Nikx

    ReplyDelete
    Replies
    1. Sorry it is my mistake. I did not change the MainActivity.java file content.

      Thanks for this great tutorial!

      Nikx

      Delete
  26. Great tutorial. Thanks a lot.
    This all some people need to start developing mobile apps with HTML5.

    ReplyDelete
  27. hi.. sorry for bothering you.. Can you make a tutorial on how to create the java plugin for the phonegap.. I keep finding tutorial with the old phonegap version that doesn't work.. Thanks :)

    ReplyDelete
  28. Hi, Thanks for the tutorial.

    Do I have to make the same process for every app?

    Thanks in advanced.

    ReplyDelete
  29. Hi,, Thank you so much..
    i realy learm from this tutorial..

    ReplyDelete
  30. Great job. Its was helpfull.

    ReplyDelete
  31. 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.js
    with the version of phonegap you have installed, it worked for me (I didn't notice it before :) )
    Thank anyway for the tutorial!

    Davide

    ReplyDelete
    Replies
    1. hey sir i am working on app it is working on emulator but when i attach android phone it comes design but not calling localhost webservice

      Delete
  32. Very elaborative and helpful, thanks for putting every minute details.

    ReplyDelete
  33. i follow your steps.but its gives me the error
    "Error : initializing cordova:Class not found."

    Please Help me.

    ReplyDelete
    Replies
    1. I get the same error as Purav. Please help!

      Delete
    2. hi there!

      make sure you are using the right version of cordova while copying the file index.html then it should work!

      regards,
      ricardo

      Delete
    3. hi there!

      make sure you are using the right version of cordova while copying the file index.html then it should work!

      regards,
      ricardo

      Delete
  34. I got some error regarding missing plugins.xml file.

    I created plugins.xml file with the following code:





    I placed the file in res/xml. I also had to move config.xml file to same folder as it couldn't find it.

    It works now. Thanks you for your help!

    ReplyDelete
  35. super.loginUrl(string) show unexpected error .Please help me with this issues.I am using phoneGap2.9.0

    ReplyDelete
    Replies
    1. Make sure your MainActivity.java file extends DroidGap.

      Delete
    2. Thank u. This Artical helps m.

      Delete
  36. Nice tutorial for phone gap , i ever seen:-):-)

    ReplyDelete
  37. Thanx a lot for this helpful post. Its great for a beginner. It hardly took me 5 mins and all done so easily. !!

    ReplyDelete
  38. Thanks a lot for this...

    I was struggling since 2 days. You are my saviour

    ReplyDelete
  39. 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!

    ReplyDelete
    Replies
    1. sir i did same thing as u told above and i am able to get the output in emulator for android now what should i do to get output for ios?...

      Delete
  40. Amazing tutorial. Thanks a lot.
    This will help those people who want to start developing mobile apps with HTML5 and android.

    ReplyDelete
  41. Great tutorial.
    Thanks a lot.

    ReplyDelete
  42. Great tutorial this will help me do my first phone gap app......

    ReplyDelete
  43. You need to add the config.xml file to the res\xml folder. Not mentioned in the turorial

    ReplyDelete
  44. hey sir i am working on phonegap app it is working on emulator but when i attach android phone it comes design but not calling localhost webservice

    ReplyDelete
  45. Thank you so much! I tried to get my app to work since two days using different sites but it never worked. Now it's finally working

    ReplyDelete
  46. This comment has been removed by a blog administrator.

    ReplyDelete
  47. i have downloaded phonegap2.9.1 in that there is no cordova .jar file can u people help meee
    thnaq

    ReplyDelete
  48. Hi,
    I want to download the phone gap application, your information very useful for me, i had bookmarked you blog for further posts..

    ReplyDelete
  49. Really Amazing ... I have never Aspected To do so,Today I am able to do. I am really happy..

    ReplyDelete
  50. i didnt find cordova.jar file in android/ folder !!! in phonegap 2.9.1, Help Me

    ReplyDelete
  51. I couldn't find cordova.jar, cordova.js and xml directory in my C:\development\phonegap-2.9.1\lib folder. Please help me!

    ReplyDelete
  52. even i didnt find cordova .jar file in 2.9.1 version

    ReplyDelete
  53. Hey Guies,

    You can see more detailed phonegap and other video tutorial on the below link:

    http://youtube.com/webboostings
    http://programming-guru.com/
    http://webboostings.blogspot.in/


    Thank You
    Abhishek

    ReplyDelete
  54. Hi

    Thanks For Sharing This Post it is very informative

    For More Information You Can Visit This Website Android Application Development Solutions

    ReplyDelete