This short tutorial will explain how to make an application that launches your website inside of the application when it is launched using the WebKit. This tutorial assumes that you have Eclipse installed with the ADT plugin and that you know how to start an Android Application project in Eclipse

The WebView
A WebView allows you to create your own web browser Activity. In this tutorial, we’ll create a simple application that will load your website in it’s own window (not the browser).

The Project
1. Create a new project/Activity called WebViewDemo.
2. Open the layout file layout/main.xml. Insert a WebView so it looks like the code below

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="vertical">

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

</LinearLayout>

3. Now open the WebViewDemo.java file. At the top of the class, instantiate a WebView object:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package com.androidworkz.webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebViewDemo extends Activity {
    /** Called when the activity is first created. */
    WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewDemoClient());
        mWebView.loadUrl("http://www.androidworkz.com/");
    }
   
    private class WebViewDemoClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
   
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

4. Because our application needs to access the internet, we will need to add the permissions to the Android manifest file. So open the AndroidManifest.xml file and replace it with the following

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.androidworkz.webview"
     android:versionCode="1"
     android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".WebViewDemo"
                 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>
    <uses-sdk android:minSdkVersion="7" />
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
</manifest>

5. Now run your application in the emulator by clicking the run icon on the Eclipse toolbar or pressing the keys CTRL + F11

Here are some screenshots I took of the application working on my Droid. The first is the mobile version of the site and the second is the non mobile version in landscape mode.

I hope this tutorial helped :)