HTML5 in Android App for WebView Display

Load HTML Page Saved in Android Project

To display lots of informational text and images in an Android Application (App) HTML is a good choice. HTML is now at version 5 and supports text formatting and image display. The formatting of the text can be enhanced by applying CSS (Cascading Style Sheets). This article shows how to add HTML5 in Android using a simple example. The HTML file is created in an editor. The file is placed into the assets folder. An App with a WebView loads the HTML using the URL file:///android_asset/file.html, where file.html is the file created.

Although this tutorial will be loading a static HTML file the WebView can also display dynamic HTML by using JavaScript and the Document Object Model (DOM). The combination of HTML for page elements and structure, CSS for formatting, DOM to access the structure and JavaScript for manipulation makes the WebView a powerful component for displaying large amounts of text and images in an App.

Create Files for HTML5 in Android App Example

To start the HTML5 in Android tutorial create a new Android App project in Eclipse or Android Studio (if you don’t know how see our Android Hello World Java Program example). Here the project is called Show HTML. The HTML to be displayed in this example will be an image and some text.

Crocodile image for the HTML in Android App exampleA new file is created in the projects assets directory. In Eclipse use the File menu to select New and then Untitled Text File. Enter the required HTML. (To see the basic structure of a HTML document look at the article Hello World in HTML.) In this tutorial the text used is a poem by Lewis Carroll from the book Alice’s Adventures in Wonderland. Any text can be used. The image of a crocodile was from the Open Clip Art Library and is in the Public Domain. Copy this image and save it into the assets directory as crocodile.png. Finally here’s the full text for this HTML example:

Copy this HTML to the new file, save it in the assets directory and call it crocodile.html. (If using Android Studio you will need to create the assets directory under main in the project tree and name the HTML file first before adding the text.)

Open the App’s layout file, here activity_main.xml, add a WebView. If using the graphical designer ensure it fills most of the screen. Here’s a simple layout that can be used:

With the HTML files and layout ready only the code to load the files is required. The usual findViewById method is used to get a reference to the WebView. Then the loadUrl method of the WebView is used and passed the name of the HTML file. The name is appended to file:///android_asset/, note that it is singular asset and not the same as the directory which is plural and called assets. Think of it as you save many assets in the directory but only load one asset to display. Open the Java class file for the activity, here called MainActivity.java. Add these two lines of code to the default generated onCreate method:

The full MainActivity.java file will look like this (the package name may differ):

Run the App and the HTML will display.

HTML5 in Android App

Once advantage of the WebView is that it will scroll automatically if the page does not fit in the entire display:

Scrolling HTML5 in Android

For further information on the WebView, for example turning on JavaScript support, see the Android docs.

For more information on HTML5 the Mozilla Foundation have some good references.

Acknowledgements

Crocodile image created by Open Clip Art user frankes.

One thought on “HTML5 in Android App for WebView Display

  1. Hello, First of all I want to say very thank you for this post I know it is 2 years old post but I cannot found it in my search result and after searching of two weeks I found this great help.
    Actually I was looking for something similar but non tutorial (text-video) helped me out but your post did.

    But still I am one step far from what I want. I have a complete file with folders of images, js and css etc. which is linked with index.html file.

    So, if you can help me out with how to link multiple html,css,javasript, images files it will be great help.

    Thank you so much again!

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.