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

SeekBar Android Example Code and Tutorial

Code To Demo A ProgessBar That Can Be Dragged

Understand how the SeekBar is used in an Android App. This tutorial provides some SeekBar Android example code for you to try out. This demo code for the SeekBar appears in the API Demos App that comes with the Android Software Development Kit (SDK). The API Demos App is very large and it can be difficult to find the sample code you need. Putting the SeekBar Android example here allows it to be easily referenced.

The SeekBar is a useful User Interface (UI) control. It allows a user to easily vary an integer value simply by dragging left or right. Although for very large integer values you may not have fine control and a EditText may be a better option. For small values, such as a percentage, it is a good solution for providing a value setting interface.

What Does an Android SeekBar Look Like?

The following two images compares the look of the SeekBar. The first shows it on older (original theme) devices, the second on recent Holo themed devices.

The Android SeekBar in action on older devices:

SeekBar Android Example Older Devices

The Android SeekBar in action on newer devices:

Seekbar Android Example Holo Devices

The SeekBar Android Example Code

Start by generating a new App in Eclipse, here it is called SeekBar Demo. (If you are new to Android programming see the articles Set Up Windows for Android Development and Your First Android Hello World Java Program.) You can of course add the SeekBar to an existing App by adapting the code appropriately. With the App open replace the contents of the MainActivity.javaactivity_main.xml and strings.xml files with the code shown below (keeping your chosen package name in the Java source code file). This code produces the screens shown above. Continue reading

A Swipe View Android Example for Screen Paging

Simple Flip View Tutorial Using ViewPager for the Android Screen Swipe Effect

This introductory tutorial shows how to code a simple page swiping App with the ViewPager class. It is the basis for more complex view flipping examples, such as an image swiping gallery (to replace the Android Gallery widget that was deprecated in API 16). The ViewPager controls the swiping (flicking the screen left and right) between multiple screens or pages of data. The ViewPager is fed with the multiple screens by a PageAdapter (or the sub-classes FragmentPageAdapter and FragmentStatePagerAdapter).

ViewPager in Action

The implementation of the PageAdapter will create (and destroy) the pages to be shown in the ViewPager. It will load the pages with the data (such as text or images) that must be displayed on the individual pages. This tutorial’s PageAdapter allows swiping through a series of strings (text). Once this example is complete it is easily extended. The follow on tutorial turns this example into a swiping image gallery with each image showing a caption. The following steps are performed to complete the screen swiping demo:

  • Start a new Android App in Eclipse.
  • Add the ViewPager widget to the Apps screen.
  • Define the data (text) to be displayed on each swiped page.
  • Define the layout for the swiped pages.
  • Implement PageAdapter which will create each page and load it with data.
  • Test the App.

Start a New Android App

This tutorial assumes that you are using Eclipse to try out this example code. Start by generating a new App in Eclipse, we called it Swipe Demo. (If you are new to Android programming see the articles Set Up Windows for Android Development and Your First Android Hello World Java Program.) You can of course add the page swiping effect to an existing App.

Adding the ViewPager Widget to the App’s Layout

The ViewPager is part of the Support Library, which is added by default to a new App created with a recent version of the Android API (the Support Library used to be known as the compatibility package). The ViewPager is referenced using it’s package name of android.support.v4.view.ViewPager. Open the default activity layout (or open the layout you are using) and add the ViewPager using the XML editing window, give it the id of viewPager. The ViewPager sits under the TextView (if using the layout created by the default Blank Activity after creating a new Android Application Project).

The TextView is also centered and the text changed from Hello world! to Please Swipe. It is made larger by assigning ?android:attr/textAppearanceMedium to the textAppearance attribute.

Defining the Data to Show on Each ViewPager Page

In this example some text is shown on each swiped page. Here the strings are stored in an array. The array could be defined in code but here they are in a resource file. Open the strings.xml file and add a string array. We are using the code names for Android version releases, all named after desserts: 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

Running an Android SDK Sample App

How to Load and Run a Sample Program from the Android SDK

The Android Robot LogoThe Android Software Development Kit (SDK) gets updated with new version platforms for each new release of the Operating System (OS). Each version platform can be loaded onto your development machine with SDK Manager.exe. There are available sample Applications (Apps) to showcase Android features and provide example code that allows developers to see how to use the Android Application Programming Interface (API).

Getting Hold of the Android Samples

Each SDK platform version provides Android sample source code project, however, they must be selected for installation on your development machine using the SDK Manager program. Run SDK Manager and wait for it to finish doing it’s checks. Expand the required Android Version folder to see and select the Samples for SDK option.

Exmaple Apps can be Loaded with the SDK Manager

Once the samples have been installed they will be found in the android-sdk/samples folder in the Android SDK’s install directory. (On Windows this may be under the Local Settings/Application Data folder, e.g. C:\Documents and Settings\John Doe\Local Settings\Application Data\Android, or wherever you chose to install it.) There will be a folder for each Android API version for which you chose to install the samples, called android-x where x is the API version.

Android SDK Samples

See our article Use Android SDK Samples for Guidance to see a list, and brief description, of the example Apps supplied with the various Android versions. Continue reading