Monday, June 13, 2011

How to run HTML5 app from Android app? Android + WebView + HTML5 + Java Script + Web DB

I was trying to make HTML 5 sample run from Android app. I was trying to use local database feature of HTML 5 app which works well with my Android 2.3.3 version device.

Following code worked for me:

WebView webview = (WebView) findViewById(;

webview.setWebChromeClient(new WebChromeClient() {
public void onExceededDatabaseQuota(String url, String
databaseIdentifier, long currentQuota, long estimatedSize,
long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(estimatedSize * 2); // try to keep quota size as big as possible else database will not get created in HTML 5 app

WebSettings settings = webview.getSettings();

String databasePath = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();

Issue: I was using following java script code to create database:
var database = window.openDatabase("total", "", "main total", 1024*1024);

Some how database object in HTML 5 was always coming as NULL both in emulator and device. Same HTML 5 code was working properly in Crome browser. In the end, I drilled down to quotaUpdater.updateQuota() method, I tried various quota sizes but at the end "estimatedSize * 2" worked for me which is mentioned in above code sample.

I was actually working on hybrid android app. ( Hybrid = Android Native + HTML5) I have explained HTML5 web database example in separate blog post:
Following HTML5 sample can be used to test above Android WebView sample app:

<!DOCTYPE html>
    <title>HTML5 Sample</title>
    <form method="get" id="employee_form">
        <label for="1">Employee Id</label>
        <input type="number" min="1" id="id" name="id" size="5" step="1" placeholder="Enter employee Id" />
        <label for="2">Employee Name</label>
        <input type="text" id="firstName" name="firstName" placeholder="Enter employee name"  />
        <label for="3">Contact</label>
        <input type="number"  id="contact" name="contact" size="12"  placeholder="Enter contact number" />
        <label for="4">E-mail</label>
        <input type="email" id="email" placeholder="Enter email address" size="30"/>
        <input type="submit" value="Save Employee Record" />

You can use to check if specific HTML5 feature is supported by your browser.

Current web browsers support HTML5 to varying degrees. Modernizr JavaScript library built to make browser detection of HTML5 features easier. It can be used to check if certain HTML5 features required by the app is supported by the browser or not.

HTML5 Database API Support in an Android WebView


  1. Thanks for the nice blog. It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us.
    android application development

  2. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 media player

  3. I want html5 camera sample program plz do that

    1. This comment has been removed by the author.

    2. This comment has been removed by the author.

  4. Thanks for the comment Rajitha. I will try to make HTML5 camera sample program for you when I get time. But as far as I know you will need to use Phonegap or similar tool kit to use Camera from HTML5.

    Let me do research and see if in recent version of Androind (Android 4+) any feature is introduced which can be used to access Camera from HTML5.

  5. Hi Rashid Noorani. Thanks you for sharing this with us!

    I've tried your code in my project and works perfectly!

    But, I need my android app to access the database created by the app in the webview. Could you, please, tell us how can we share a database between android native application and a webview?

  6. Dear Rashid .Can I create a Local File on a Android device using HTML5.I m working on a local Offline Application & i need to store the result on the device Using any kind Of File.

    1. Why do you need to create a file locally anyways? Why can't you use local storage instead?

  7. Anyone have any ideas how to handle this issue in a pure web app (not native)? We have a few devices that return db=null after performing window.openDatabase. The window.openDatabase method is available, that much I know. No matter what value I use for maxSize, I still get db is null.

  8. the actionbar is very important and crucial when we normally talk about andriod apps.this is usually helpful.i found a example how to use it.hope this will usefule

  9. HTML5 Development
    is the hottest web development platform that takes the experience of building the web pages to a different level. Not only that, it also enhances the surfing experience.

  10. Hi,

    I tried out the code above but i am experiencing an error "webstorage cannot be resolved to a type".

    please help.

    1. Just add:
      import android.webkit.WebStorage

  11. thanks for the article, it was incredibly helpful, and phantomjs rocks when it comes to making pdf files. html5

  12. it's not working on android 4.2.1

  13. In HTML we use link command in Android how to generate link.. Give one example

  14. Thank you for sharing the information here. Its much informative and really i got some valid information. You had posted the amazing article.School web design uk