Advertisement
Android SDK

Android SDK: Embed a WebView with the WebKit Engine

by

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="http://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:

WebView engine = (WebView) findViewById(R.id.web_engine);
engine.loadUrl("http://mobile.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!

Android Webview: Webkit Rendering

Step 5: Render Custom Markup

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

  1. String htmlData
  2. String mimeType
  3. String encoding

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

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

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

Android WebView: Load Custom HTML/CSS

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:


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?

Related Posts
  • Code
    Mobile Development
    Streaming Video in Android Apps54dpm preview image@2x
    The Android platform provides libraries you can use to stream media files, such as remote videos, presenting them for playback in your apps. In this tutorial, I will show you how to stream a video file using these libraries.Read More…
  • Code
    Android SDK
    Create a Music Player on Android: Project Setup0d63m preview image@2x
    The Android platform provides resources for handling media playback, which your apps can use to create an interface between the user and their music files. In this tutorial series, we will create a basic music player application for Android. The app will present a list of songs on the user device, so that the user can select songs to play. The app will also present controls for interacting with playback and will continue playing when the user moves away from the app, with a notification displayed while playback elapses.Read More…
  • Code
    Android SDK
    Using the Accelerometer on Android06lom preview image@2x
    In this tutorial, we are going to explore how to use the accelerometer, one of the many hardware sensors of modern smartphones, in an Android application. I'll explain what an accelerometer is and why it may be something you want to take advantage of in your Android applications.Read More…
  • Code
    Android SDK
    Create a Hangman Game: Project SetupAndroid hangman game preview retina
    In this series, I will show you how to create a simple Hangman game for Android. In every tutorial, you'll learn a number of fundamental skills for creating Android applications. The application will consist of two screens, include user interaction involving adapters, contain dialogs and an action bar, and leverage XML for data storage. Let's get started.Read More…
  • Code
    Android SDK
    Consuming Web Services with kSOAPEd4e2 preview image@2x
    In this tutorial, you'll learn how to consume web services using the popular kSOAP library in an Android application. kSOAP is a reputable library loved by developers who have the need to parse WSDL (Web Service Definition Language) and SOAP (Simple Object Access Protocol) messages.Read More…
  • Code
    Android SDK
    Android SDK: Create an Arithmetic Game - Setup and Interface CreationMath game preview@2x
    The Android platform provides the ability to facilitate interaction, to carry out computation, and to save data. To explore some of these basic features with a practical focus, this series will create a simple arithmetic game for the Android platform. The series will involve creating user interface elements and layouts, four Activity classes, and one helper class. The gameplay logic will be relatively complex if you do not have much Java experience, but you will learn to use various Java control structures along the way! Read More…