How to create an Android app with Phonegap using Eclipse?

Android and Phonegap

Hello everyone, watsup? Everything Ok naa? Well, I hope so.

Have you heard about Phonegap??

No..No..No… I am not talking about the gap between two phones. 😛 Jokes apart, this tutorial is to introduce you with the Phonegap’s cross-platform features, about its awesome compatibility and many more superb facilities. So let’s begin..!! Today’s tutorial is based on how to create your first “Hello” application using Android with Phonegap. Before we proceed with this, I would like you to introduce you with this new concept of Phonegap.

What is Phonegap?

Phonegap is a free and open source framework for creating mobile applications using standard Web APIs for the platforms you want. Phonegap applications are created using 3 web technologies i.e. HTML, CSS and Javascript.

The basic and most advantageous feature of Phonegap is that you can write and compile the code without worrying about maintaining the native SDKs. You get 7 different executable files which are compatible with your fellow devices. In the end you get an application running on Android OS, WebOS, iOS, Bada, Blackberry, Windows and Symbian.

There are few tools which you’ll need to have before starting this tutorial which are as follows:

1) Download and install Eclipse Classic 3.7.2 version (Remember: You must download an Eclipse version of 3.4 or 3.4 plus)

2) Download and install Android SDK version from developer.android.com.

3) Download and install ADT Plugin.

4) Download the latest version of Phonegap.

Step 1: Open the Eclipse you have downloaded and select a workspace in which you want to create your project. Here I have made a workspace in my D: drive and select “OK”. 1

Step 2: After this you go to menu File > New > Project > Android > Android Project From Existing Code > Next

3

Step 3: In this step you need to browse the directory in which your phonegap’s latest version lies. Say for example I have a Phonegap 2.6.0 version on my desktop’s folder named “New Folder”. So browse Desktop > New Folder > phonegap-2.6.0 > lib > android

3

Here you’ll be shown two projects named Activity and Cordova, from these unmark the activity project and rename the Cordova to “Phonegap Example” or any other convenient name for your project and click “Finish”.

Now you will find a new project created on the left side of your eclipse’s screen in a “Project explorer”. If there is a package explorer instead then you go to Window > Show View > Project Explorer and you’ll find the project explorer.

10

Step 4: Now you explore the project and you’ll find that there are lot many folders. From them, you explore the “src” folder and you’ll find out a package already created named like “org.apache.cordova.example” and in that a Java file named cordovaExample.java will be there.

So go and open that java file and edit that java file to this. (Also apply this shortcut Ctrl + Shift + O to fix all the imports.)

Step 5: Now explore another folder named “assets” and you’ll find a subfolder named “www”, and explore it further and you’ll find out numerous other folders named css, js, etc… You’ll also find an html file named index.html. Open that file and edit as below.

 

Note: If you do not find any folder named “Web” into this window, it means you need to update your eclipse by the following steps: Go to Help > Install New Software > Add this whole thing “Indigo – http://download.eclipse.org/releases/indigo” into the text field > Check the checkbox before “Web, XML, Java EE, and OSGi Enterprise Development“ > Click Next > Finish

Step 7: Now you need to check this app by running this thing in emulator. Always keep this thing in mind that, always have a habit of cleaning up your project to fix all the bugs and errors if there. You can do this by Project > Clean > Clean Projects selected below > ok.

If you already have any emulator’s device name then you can run directly by right clicking on your project name from the project explorer > Run as > Android Application.

If you do not have any virtual device then eclipse will prompt a message like this. So click yes.

8

You will be redirected to a window like this where you need to create your new Android Virtual Device like this.

9 (2)

After this clean your project as mentioned above and run your application successfully.

So this is all about the first tutorial on Phonegap, next time I’ll show you how to upload your Phonegap project in the form of a zip using Phonegap to get your desired executable files.

If you have any doubts regarding this article you can freely ask me, I’ll try to solve them out.

Hope you all enjoy trying this first tutorial of Phonegap with Android. 🙂




There are 45 comments

Add yours
  1. Narendra Kumar

    Nice article. Previously I followed some other post to create an Android app. But failed in creating that.. This tutorial working me as described. Now I am planning to make a app for my website using phonegap with android.

    • Charmie

      Hey Narendra,
      Yes, you can easily create an android app using phonegap’s platform and languages like HTML, CSS and Javasrcript and that too in Eclipse.
      I am glad that you found this post worthy and useful.

      All the best for your application.

      Regards

    • Charmie

      Hey Mayur,
      Thank you so much. I feel very happy and proud that you found this article perfect.

      Thank you so much for being here and dropping your reviews in here.

      Regards

  2. marilyn cada

    hi charmie. i noticed that you like creating tutorial posts. you can earn money from that. if you are expert in wordpress or at least understood how wordpress CMS work, why dont you try submitting articles to wpmu.org?

    • Charmie

      Hey Marilyn,
      Yes ofcourse I love creating helpful tutorials. And yes I am write now learning the WP, but still I am at a level zero.
      Thank you so much for your valuable advice. 🙂

      Glad to see you here.
      Thanks.
      Regards

  3. Vivek Baghel

    Hi Charmie,
    You did a great job to share this such a helpful post for How to create an Android app ! I just used Android app but I didn’t think about create an Android app with Phonegap. So thanks for this superb article to make aware me….

    • Charmie

      Hey Vivek,
      Welcome on our blogging site. Glad to hear from you. I am also new to this, I have been doing it since a month or two but its easy and indeed highly compatible cross platform to work upon.
      Thanks a lot for dropping your acknowledgements in here.

      Regards
      Charmie 🙂

  4. Ashi

    Hey Charmie,
    Nice and detailed tutorial. Will look forward to develop a app for my site. I have developed a chrome extension. Which was not that hard.
    Thanks for the update 🙂 Peace

    • Charmie

      Hey Ashi,
      Glad to find you again on my site reading it with keen interest. 🙂
      Yes such apps can be very useful, and most importantly you can deploy on many platforms so thats the biggest plus points.
      Thanks a lot for being here with us in the discussion. 🙂

      Regards

  5. kiran

    yes it’s working for me but it isn’t supporting HTML5 websql Database if it does then how can i create dynamic content based Apps.

    • kiran

      hey database working sorry! I forgot to add DeviceReady Event in javascript

      How ever Thanks for giving this tutorial. awesome:-$

  6. Simran

    Well i was looking for the similar thing about a year ago, but now i develop apps without any support. But thanks for sharing as i will share this with noobs.

  7. Sohail

    Hello,

    Wow thats a really interesting article, i really love to create new apps. The thing is i though it would be a huge process. But now i think it’s easy and im gonna create my own app soon.

    thanks

    • Charmie Prajapati

      Hy Sohail,
      Glad to find you here while searching on some phonegap articles. Well, I will wait for your response regarding the new app and try my hands on over it. 🙂

  8. Kaustav Banerjee

    Very good tutorial. I am a veteran in HTML, PHP and JQuery, but your article on Android has really motivated me to plunge into Android apps. I have started learning bit by bit and your tutorial will surely help a lot. Phonegap, I had heard before and would love to learn more about it.

    Great post!

    • Charmie Prajapati

      Hy Kaustav,
      Yes Phonegap is another new dimension which is actually plunging into the markets. I am happy to hear such words from you. Will soon write another one on it.
      Thanks a lot for stopping by. 🙂

  9. Michael Joseph

    Phonegap is widely used for building cross-platform mobile applications. It was really hard for me to understand this App, you have made my work easy…
    Thanks for sharing..

    • Charmie Prajapati

      Hy Korede,
      I am glad to know that you found my article appropriate and exact match of what you actually needed.
      Thanks and Regards
      Charmie

    • Charmie Prajapati

      Hy cruz,
      Thanks a lot for being here.
      Yes, you can create a database. I specifically have worked with Android and Phonegap and so for that you need to create a database with the help of Sqlite. You need to pass the Sqlite queries into your javascript functions and call it accordingly. 🙂
      Thanks.
      If you have any more query do feel free to share here. 🙂

      Regards
      Happy Coding time.

  10. Sakib

    Hi Charmie,
    The first sentence I wanna tell you for this post is “Thanks Thanks Thanks Thanks Thanks………. “. This post is really helpful for me. It really works. I think I am soon going to be a android apps developer. Thanks a lot again Charmie.

  11. Champs

    Android is arguably the most advanced and widely popular mobile operating system in the world today and over a billion Android users around the world support that claim. thanks for sharing more about it..

    Keep Updating
    champs.net

  12. rtiarno

    The environment interface of eclipse is little bit complex :), but has many feautres to bulid aplication and library to build android app, thank for share

  13. Raheem

    Hi Charmie,

    Indeed an awesome article. I loved the way you articulated the complicated and extremely difficult way of making Android app into an easy and simplistic method.

    I’m new at your blog, I liked all the Android guides you wrote.

    Best of luck for your future.
    PS: Expecting more and more awesome guides from your end 😛

    Thanks.

  14. Manidip Banerjee

    I am not kind of an expert developer, I have worked on the recent Android SDK which comes with Eclipse pre-installed. I haven’t downloaded Eclipse separately. Do I need to download Eclipse separately to use “Phonegap”?


Post a new comment