Smartphones

Embedding HTML in your Android apps

Leverage HTML and JavaScript in your Android apps by using the web view widget. William J. Francis shows you how in this tutorial.

Over the last decade I have witnessed a fundamental change in the mindset of software engineering. Instead of choosing the best tool for the job, software professionals now have the freedom to think in terms of the best tools for a given task. Advances in platforms and compilers have given rise to mix and match technologies. Android is no exception.

If a project has a complex user interface, there are a number of GUI tool kits available, as well as standards like OpenGL. If an application needs raw processing power, developers can write methods directly in C++, then call those methods through Android's JNI. And when an application needs simply to display HTML and JavaScript, whether that content resides locally or remotely, modern platforms like Android provide a mechanism to do so.

This tutorial demonstrates displaying a remote web page within the context of a native Android application. You can follow along with the detailed instructions below, or simply download and import the entire project into Eclipse.

1. Start a new Android project in Eclipse. Target Android 1.6 or higher. Don't forget to rename the startup activity Main.java.

2. Open the Android manifest file for your project and add an internet permission.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.authorwjf.web_view"

android:versionCode="1"

android:versionName="1.0" >
<uses-sdk android:minSdkVersion="4" />

<uses-permission android:name="android.permission.INTERNET" />

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >

<activity

android:name=".Main"

android:label="@string/app_name" >

<intent-filter>

<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>
</manifest>

3. In the /res/layout folder, we need to define our main.xml layout. Notice the layout_weight parameters? We need these to "sandwich" our HTML content between the two text views. Without specifying a weight, Android's layout manager will allow the web view to consume the entire bottom portion of the display.

Main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="My Web View"

android:layout_weight=".1"/>

<WebView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id="@+id/my_webview"

android:layout_weight=".8"

android:layout_margin="16dip"/>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="My Web View"

android:layout_weight=".1"

android:gravity="bottom"/>

</LinearLayout>

4. We will modify the /src/Main.java file to push a remote URL into the web view. We can do all of this in the override of the on create method. Pay special attention to the creation and assignment of a new web view client. The reason for this is that many web pages perform a redirect when they detect a mobile client, and by default when this redirect occurs Android will launch the default browser and display the page there. If you want to keep the remote page inside of your activity, then creating a new web view client with an override of shouldOverrideUrlLoading is a quick and effective means.

Main.java
package com.authorwjf.web_view;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class Main extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.main);

WebView wv = (WebView)findViewById(R.id.my_webview);

wv.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

});

wv.loadUrl("http://www.techrepublic.com");

}

}
That should just about do it. Run the resulting application in the simulator, and you will see both of our text labels with a web page in the middle (Figure A). Figure A

While our example is not very practical, it doesn't take much imagination to realize the power and timesavings the web view widget brings to your digital toolbox. And remember, the content doesn't have to reside remotely -- I frequently find myself utilizing the web view as a quick and convenient method for display user tables and reports.

If you have yet to use the web view widget in your Android applications, I encourage you to step back and consider if there are places in your project where it might make sense to leverage HTML and JavaScript.

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

2 comments
udbhavah
udbhavah

Just now tried the tutorial. website had come in the webview but.. i am not getting the vertical scroll even though we have wrap_content for android:layout_height="wrap_content" in the WebView tag.. any help on this is appreciated. thanks srinivas

melston
melston

I have three apps on Google Play now (Android Kakuro, Medicine Tracker, and LogicCalc) and had to create help documentation for all of them. I looked long and hard before settling on this mechanism along with jQuery-mobile to provide reasonably good looking documentation. It took a little playing around to get it all working correctly but is remarkably simple to use overall (and looks pretty good, too). Perhaps an update to this article discussing the use of a library like jQuery mobile would be useful as well. Mark