Developers

Build Android Apps Using HTML with PhoneGap

August 1, 2011

24620

HTML + JavaScript = Android App

With all the hubbub around Android, it’s tempting to make an app yourself. But considerations like, “I don’t know Java,” or “I’m just a Web developer and haven’t ever done app development,” hold back a lot of us. Fear not; PhoneGap comes to the rescue. In this article, I will show you how to make a simple “Hello World” app for Android using PhoneGap. I will also give you a few tips along the way so that these Web apps behave natively the way any normal Android app would. (Yes! It’s possible.)

When Android Inc. developed Android back in 2003, no one really took notice. Then Google acquired it in 2005. Still, not much happened. Six years later, in 2011, we’ve witnessed a flood of Android devices — not just phones, but tablets, music players, in-car entertainment and what not; everyone wants to go the Android way. Even Arduino, the popular open source physical computing platform for hobbyists, has been roped into the club. Tomorrow, it will be in all devices that can do something beyond telling the time; but who knows, maybe it will be in our clocks too. Android has gone where all open source software aspires to be: beating the cr*p out of proprietary platforms, and walking the talk: “Free is awesome.”

About PhoneGap

Essentially, PhoneGap is a wrapper through which you can make a Web application using HTML/CSS, and build apps for not just Android, but all major platforms like Symbian, Windows Phone, BlackBerry, Palm, etc. I have provided links and references at the end of this article, for your exploratory appetites.

Getting started

As for most development, you need to set up the environment. Here, we will use a GNU/Linux PC. I have used Fedora 15 as the distro of my choice, but if you use another, my instructions should work with little change.

You need OpenJDK or Oracle JDK installed, since Android apps are built with Java, and it’s a dependency of the SDK as well. Most distributions come with OpenJDK. If it’s not installed, use the Add/Remove Software panel (or Synaptic, in Ubuntu/Debian), and install it.

Next, install Eclipse — a great IDE for development of any kind. In a terminal, run sudo yum install eclipse. If you have Ubuntu, use sudo apt-get install eclipse.

Next, configure the Android SDK. Begin by downloading the SDK binary for Linux from the Android Developer website. Extract the contents of the TGZ archive using any archive extraction tool. Note the location you extract it from — you will need the path later on.

You then need to install the Android Developer Tools (ADT) plugin for Eclipse. Start Eclipse, and go to Help –> Install New Software. Click the Add button to add a repository. Enter a name of your choice for the repo, and for Location, enter https://dl-ssl.google.com/android/eclipse/.

Clicking OK will bring up a checklist. Check the Developer Tools item and click Next to view a list of what it is going to download. Proceed, and accept the License Agreement on the next screen. Hit the Finish button, and wait during the download and install.

Once the ADT plugin is installed and Eclipse has been restarted, go to Window –> Preferences –> Android and set the SDK path to the path of the extracted SDK. Next, go to Window –> Android SDK and AVD Manager. Select the Available Packages category, and check all items to do a full install. Click Install Selected to proceed. The install will take some time, mostly for downloads. Grab a cup of coffee or your favourite beverage while you wait.

Simple app

With the environment for Android development set up, let’s make a HTML file and then use PhoneGap to build the app. Open up gedit (or a text editor of your choice) and enter the following HTML, saving it as index.html:

<html>
  <head>
     <script type="text/javascript" charset="utf-8" src="phonegap-0.9.6.js"></script>
  </head>
  <body>
     <h1 align="center">Hello World!</h1>
     <h2 align="center">from PhoneGap</h2>
  </body>
</html>

Before creating a new project in Eclipse, you need to create an Android Virtual Device (AVD) in which to test the app before installing it to your phone. In Eclipse, open Window –> Android SDK and AVD Manager. Select Virtual Devices and then New. In the dialogue box, give a device name and select a platform (say, Android 2.3). Click Create AVD to finish.

Now for a new Eclipse project. In Eclipse, go to File –> New –> Project. For Project type, select Android Project. Fill in the following details:

Project Name: HelloWorld.
Application Name: My First Android App (or your choice)
Package Name: the name-space of the app — what we can loosely call the “context” of the app in development terms. Use com.phonegap.helloworld; phonegap has to be a part of the name-space since we will be wrapping the app with it.
Create Activity: Keep this as App for all PhoneGap-built apps.
Build Target: Select “Android 2.3”.

Click Finish; and Eclipse prepares the project structure and files.

Integrating PhoneGap into the project

Note: Some of these steps involve entering code that is repeated for all apps using PhoneGap. The PhoneGap website has this code ready to copy and paste, to save effort. Refer to the website for this code.

First, download the PhoneGap binary from the website and extract it. In Eclipse, create two folders in the root of the project: /assets/www and /libs. Place the HTML file we created into /assets/www. In the HTML code, replace the name (depending on the version and filename) of the PhoneGap JS file you are going to use. From the Android folder of the extracted PhoneGap archive, copy the JS file to the Eclipse project’s /assets/www folder, and the JAR file to /libs. Right-click the libs folder in Eclipse, and select Configure Build Path. Add the PhoneGap JAR file from the project. Close the dialogue and refresh the project by hitting F5.

Finally, we will modify two files, AndroidManifest.xml and App.java, before our project is ready to run. In Eclipse, right-click AndroidManifest.xml and choose Open With –> Text Editor. Look for the following snippet at the beginning of the file:

&lt;manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.phonegap.helloworld"
    android.versionCode="1"
    android.versionName="1.0"&gt;

Paste the following below the located snippet:

<supports-screens
	android:largeScreens="true"
	android:normalScreens="true"
	android:smallScreens="true"
	android:resizeable="true"
	android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

To the activity tag in the XML file, append android:configChanges="orientation|keyboardHidden, so it now looks like the following code snippet:

<activity android:name=".helloworld" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden" >

Make sure you keep saving the project, to avoid any data loss. Now, open the src/com.phonegap.helloworld/App.java file in Eclipse, and to the import lines at the top, add:

import com.phonegap.*;

Next, modify the class App to extend DroidGap. The line would then look like:

public class App extends DroidGap {

Last, reference your index.html file. Here, you have replaced the setContentView() method with the following line below the onCreate() method:

super.loadUrl("file:///android_asset/www/index.html");

That completes the process. Now run the app in the emulator, using the AVD you had created earlier. Right-click the project, and select Run As –> Android Application. Eclipse will ask you to select the AVD, and will then load and run the project. Note that the AVD will take a while to load, especially the first time you start it.

You have successfully created your first Android app, with only a little HTML and some fiddling with Java code in Eclipse!

Exploring beyond this can get very interesting, let me warn you. Jonathan Stark has written a nice little book on Building Android Apps with HTML5, CSS and JavaScript. Also, to make Web applications look like native apps, do head over to jQtouch’s website. This is a nifty little JS library that makes your HTML5 app look slick and cool, just as if you made it using native code. What’s more, you can also exploit the native hardware capabilities using the same techniques. Cool, right? So, what are you waiting for?