This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
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.
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!
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:
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:
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.