Android SDK: Embed a WebView With the WebKit Engine

This quick tip will demonstrate how you can embed an Android WebView in your application with the the WebKit engine. You will learn how to both load an external URL and render custom markup that you supply in-app.

Step 1: Preparation

Start off by creating a new Android SDK project in your IDE of choice. You can name the main activity, package root and project anything you want. Choose Android 1.6 as your platform to maintain broad compatibility.

Android WebView: Create New WebView Project With WebKit

Step 2: Setting up the WebView Widget

The WebView widget works just like any other Android SDK widget: you declare it in a layout file and can then access it from an Activity and tell it what to do.

Open your main.xml layout file or create it if your IDE didn’t already do so. Next, declare the WebView widget as a child of the LinearLayout element, making sure to specify an ID so you can access the widget later. As always, don’t forget to declare the width and height or else your app will throw an exception. For demonstration purposes, we’re going to have the component fill up the whole screen by setting the android:layout_width and android:layout_height attributes to fill_parent.

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

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >

    <WebView android:id="@+id/web_engine"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
            />
</LinearLayout>

Step 3: Requesting Internet Permission from the Android Manifest

Since we’re going to load a URL in the WebView widget, we have to make sure to request permission to access the Internet in AndroidManifest.xml

Open it up and declare a uses-permission element where you specify android.permission.INTERNET as the android:name attribute, like so (line 6):

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

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

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

    <application android:icon="@drawable/icon" android:label="WebKitDemo">

        <activity android:name=".WebKitDemo">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>

            </intent-filter>
        </activity>
    </application>
</manifest>

If you start your application in the Android emulator now, you will see a blank, white screen. Why? Well, we haven’t told WebView to render anything yet – that’s what we’ll do next.

Step 4: Load a Web Page

Open up your main activity (com.webkitdemo.WebKitDemo in our case) and add the following code into the onCreate() method:

1	WebView engine = (WebView) findViewById(R.id.web_engine);
2	engine.loadUrl("https://code.tutsplus.com");

This snippet of code accesses the WebView widget via its resource ID and invokes loadUrl(). Start the app in the emulator and view the result: it should display the site you’re currently on!

Step 5: Render Custom Markup

Next, we’re going to replace the loadUrl() call with loadData(), which takes three arguments:

String htmlData
String mimeType
String encoding

Comment out the engine.loadUrl() line and insert the following code underneath it:

1	String data = "<html>" +
2	"<body><h1>Yay, Mobiletuts+!</h1></body>" +
3	"</html>";
4	engine.loadData(data, "text/html", "UTF-8");

Compile and restart the application in the emulator and you should see this:

Technically, you can pass another type of data with its respective mime-type to this method, but most of the time you’ll be using text/html with a UTF-8 encoding. Don’t forget that you’re using WebKit, a powerful web engine; you can use CSS3, JavaScript etc. when you design your manuals or anything you want it to display.

NOTE: One of WebView’s peculiarities is the fact that JavaScript is disabled by default. The reason for this is that in most cases when you’re embedding a WebView into your application, you’re using it for a help manual or something that doesn’t require JavaScript. Nevertheless, it’s easy to enable it if you do need it:

1
2	engine.getSettings().setJavaScriptEnabled(true);

Extra features

You may have noticed that the widget doesn’t have a toolbar. This is intended, as you would normally launch the native web browser app if you want navigation capabilities. There is, however, a way to control it programmatically. Try invoking one of the following methods on the instance of your widget:

reload(): Refreshes and re-renders the page.
goForward(): Goes one step forward in browser history.
goBack(): Goes one step back in browser history.

The API has a lot more to offer, but that goes beyond the scope of this Quick Tip.

Conclusion

You should now be familiar with the basic usage of the very useful Android WebView widget. You can use it to display an “about” web page for your application or a user manual – all sorts of stuff. Technically, you can even write your application using JavaScript, CSS and HTML and display it using the widget, although that wouldn’t be too practical... Or would it?