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.) Continue reading

Support Library Samples in The Android SDK

How to Load and Run the Android Support Library Demos

This tutorial will show you how to load the samples provided with the Android SDK that demonstrate using the Android Support Library, some refer to it as Android Support Package or the Android Compatibility Package. The online Android developer documentation does not give enough detail on getting the Support Library demos running, this article covers that shortfall.

What is the Android Support Library?

The Android Operating System (OS) is updated regularly to add new features, support new devices and implement new ideas. This requires changes and additions to the Application Programming Interface (API). For Applications (Apps) to be widely used they need to run on devices with earlier APIs as well as devices that have the new features. To help developers achieve this Google provides a Support Library that allows some of the newer API features to be used on earlier devices.

For example when Android version 3.0 (Honeycomb, API 3.0) was released, to support tablet style devices, it provided the new Fragment class. The use of Fragments allows a User Interface (UI) to be divided into smaller sections allowing for improved App design when dealing with larger screens. A tablet App may have a screen composed of three Fragments, when that App is run on a device with a small screen the three Fragments may represent three separate screens. To run an App based on Fragments on a device with a version of Android lower that 3.0, i.e. API 10 or earlier, the Android Support Library is required. It has implementations of some of the new Android APIs to allow earlier devices to run code written for the new APIs, helping with an Apps backwards compatibility. (Note that this differs from Android Compatibility Mode which is what new devices use to run old Apps.)

Android Support Library Installation

Android Support Library InstallThe Android Support Library and compatibility samples are installed via the SDK Manager. If a full install of the Android SDK was done then in the Android SDK folder the compatibility files are in android-sdk/extras/android/compatibility. If the Android Support Library is not installed simply run SDK Manager (SDK Manager.exe on Windows). Open the Extras folder. Select Android Support Library then click the Install 1 package button (accepting the licence agreement).

The Android SDK has available two versions of the Support LIbrary:

  • android-support-v4.jar – Version 4 is for Apps aimed at Android Version 1.6 (Donut, API 4) and later.
  • android-support-v13.jar – Version 13 is for Apps aimed at Android 3.2 ( API 13) and later. Continue reading