Create simple Android application using HTML5 app and phonegap

Phonegap provides you an usefulĀ  library to port you web html5 application into mobile application. In this tutorial I will show you how to create a simple android applications using HTML5 & Phonegap

To begin you need:

  • Download phonegap from here : in this tutorial I use phonegap version 2.3.0
  • You need a HTML5 application, In this tutorial I download Restaurant Picker Apps asĀ  a sample. Here is a screenshot of this app

restau_picker

Now we start porting that HTML5 web apps into android mobile apps

  • Firstly, you need create a blank android project with blank activity, Android 2.1 (API 7). I name that project SimpleHTML5AndroidAppscreate_blank_android_project
  • From assets folder, create www folder and put all files of your html 5 applications into that folder

create_www_to_put_your_html5_files

  • Extract phonegap-2.3.0.zip, add libandroidcordova-2.3.0.jar into libs folder, add phonegap-2.3.0libandroidcordova-2.3.0.js into assetswww folder and copy xml folder from phonegap-2.3.0libandroid into res folder of your project

copy_cordovacopy_xml_folder

  • Open MainActivity.java to write this code:

package com.example.simplehtml5androidapps;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import org.apache.cordova.DroidGap;;

public class MainActivity extends DroidGap {

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

Now choose project -> run as -> Android Application to see your apps on emulator

application_on_emulator

Note that:

  • Sometime when launching android emulator you will get error message: Failed to install SimpleHTML5AndroidApps.apk on device ’emulator-5554′: timeout It is caused because of emulator start too slow so just ignore it, wait for emulator finish starting and choose project -> run as -> android application again
  • The fact of phonegap porting is that phone create a html viewport for you web application so due to support of your mobile in term of html5, javascript and css3 your porting application will work smooth or not

Those are several steps to create an android application from HTML5 Apps. You can also download source code using this tutorial for reference here

 

Leave a Reply