Develop Android Apps with HTML and JavaScript Using Phonegap

Develop Android Apps with HTML and JavaScript Using Phonegap

This tutorial is focused on the developers who aren’t familiar with Java, but want to develop apps for Android. This tutorial requires you to have basic HTML, and JavaScript skills. In this tutorial we will be creating a simple Android app, using HTML and JavaScript. It will be a simple `Hello world` app.

Develop Android Apps Using Phonegap

You will get familiar with:

  • Installing Eclipse and SDK.
  • Configuring your machine for Android development.
  • Creating a Android project using Eclipse.
  • Configuring the project to work with Phonegap.
  • Running the Android project using Emulator (or on a real Android device).
  • Debugging the app.

In this tutorial we will be using a desktop running Windows 7 (64 bit) along with Xperia L running Android 4.1.2 (Android device is optional).

Setting up the Android SDK

First download the Android SDK from http://developer.android.com/sdk/index.html, download the approapriate version (32 bit or 64 bit).

Make sure you have JDK 6 installed. You can download it from their official site. The SDK comes already packaged with:

  • Eclipse IDE
  • ADT Plugin
  • SDK Tools
  • Android platform tools
  • Latest Android platform
  • Android system image for emulator

Once you have downloaded the SDK, extract it in your `Downloads` directory. You should get a similar Directory structure:

File Directory

The `adt-bundle-windows-x86_64-20130717` is extracted in the `Downloads` directory. The `eclipse` and `sdk` directories will be in the adt directory.

Creating Android Project

Now launch eclipse.exe located in the eclipse directory. And you should get a Welcome screen:

Welcome Adt

Now click on the `New Android Application` button. Provide a name for your application, here we will create a application named `hello world`. Keep the default settings as it is here. And click Next.

Create Application

Eclipse will create the Project in the workspace. Click Next.

Create Application Configuration

Here you can configure the launcher for your application. Click Next.

Create Application Configure Launch Icon

Here you will be able to configure the activity screen. Select the appropriate activity screen for your project. And click Next.

Create Application - Create Activity

Click on Finish. And you have successfully created the Android application.

Create Application Finish

Configuring Project to Work with Phonegap:

PhoneGap is a free and open source framework that allows you to create mobile apps using HTML, CSS, and JavaScript. Download the Phonegap setup from here. Extract the Phonegap setup in your `workspace` directory. You should have a similar directory structure -

Phonegap Directory Structure

Now from the phonegap-2.9.0 -> lib -> android directory copy the `cordova-2.9.0.jar` to the `libs` directory of your `helloWorld` project. Now copy the `xml` directory from the phonegap-2.9.0 -> lib -> android to the `res` directory of your `helloWorld`. Create a `www` directory in the `assets` of your `helloWorld` project. Copy the `cordova.js` to this `www` directory.

Files to Copy

Create a `index.html` in the `www` directory and paste the following code in it.

<html>
<head>
	<title>Hello world!</title>
	<script src="cordova.js" type="text/javascript"></script>
</head>
<body>
	<h1>Hello world!</h1>
</body>
</html>

You should have the following file structure:

Project File Structure

Update the `MainActivity.java` in `src` directory with the following code:

package com.example.helloworld;

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

// import DroidGap
import org.apache.cordova.DroidGap;

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);
        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.main, menu);
        return true;
    }
    
}

Add the following attributes in the `AndroidManifest.xml` file, between the `uses-sdk` and the `application` attributes.

<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" /> 
	<uses-permission android:name="android.permission.GET_ACCOUNTS" />
	<uses-permission android:name="android.permission.BROADCAST_STICKY" />

Your `AndroidManifest.xml` file should look like this:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.helloworld"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
	
	<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" /> 
	<uses-permission android:name="android.permission.GET_ACCOUNTS" />
	<uses-permission android:name="android.permission.BROADCAST_STICKY" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.helloworld.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Running Your Application

Here we will be deploying the Android application on a real Android device. If you are looking to deploy the application on a emulator please refer: http://developer.android.com/tools/devices/emulator.html.

Connect your Android device to your development machine. Please make sure you have the required drivers. You can download the required drivers for your manufacturer from http://developer.android.com/tools/extras/oem-usb.html Select the Run configurations from the `Run` option of title bar. Now Browse and select the Android project. Now click Apply and OK. And you’re Done. Now click RUN and you should be prompted your Device. (Your device name/model will appear)

Android Device Select

Select the device and click OK. And your application will be running on your Android device.

Screenshot

You can download source code for sample app here. Please let us know, if you’re facing any issues by commenting below.


Join Our Email Newsletter

Like what you read here in this blog post? Get free blog updates in your Email!

About Virendra Rajput

Virendra Rajput is an avid programmer and hacker. He is a Co-Founder at Markitty. He is a hardcore Python programmer who is passionate about hacking with various APIs. In his spare time, he loves working on side-projects.

Virendra has written 6 awesome articles for us at TechLila.

Comments

 Comment Policy

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.


Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!

CommentLuv badge