Implementing WebView In Android

Last Updated: February 4, 2013

In this tutorial, you will learn how to implement a WebView in your Android application. A WebView is actually a view that displays web pages similar to an Android Internet Browser. This means you can build your own web browser or simply display some online content within your Activity. A WebView uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more. We will create 2 buttons in an activity and on first button click to will load a website and second button will load a custom HTML content in a WebView. So lets begin…

Create a new project in Eclipse File > New > Android Application Project. Fill in the details and name your project WebViewTutorial.

Application Name : WebViewTutorial

Project Name : WebViewTutorial

Package Name : com.androidbegin.WebViewTutorial

Open your MainActivity.java and paste the following code.

MainActivity.java

package com.androidbegin.webviewtutorial;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

	// Declare Variables
	Button Standardbtn;
	Button Custombtn;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// Get the view from activity_main.xml
		setContentView(R.layout.activity_main);

		// Locate buttons in activity_main.xml
		Standardbtn = (Button) findViewById(R.id.standard);
		Custombtn = (Button) findViewById(R.id.custom);

		// Capture first Button click
		Standardbtn.setOnClickListener(new OnClickListener() {

			public void onClick(View arg0) {
				// Open StandardWebView.class
				Intent intent = new Intent(MainActivity.this,
						StandardWebView.class);
				startActivity(intent);
			}
		});

		// Capture second Button click
		Custombtn.setOnClickListener(new OnClickListener() {

			public void onClick(View arg0) {
				// Open CustomWebView.class
				Intent intent = new Intent(MainActivity.this,
						CustomWebView.class);
				startActivity(intent);
			}
		});

	}

}

We have created two buttons in this activity, at the first button click will open standard WebView and load a website and on the second button click will open custom WebView written in HTML Code.

Next, create an XML file for the MainActivity class. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file activity_main.xml paste the following code.

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/standard"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/standard" />

    <Button
        android:id="@+id/custom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/standard"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/custom" />

</RelativeLayout>

Next, create a new activity for the standard WebView. Go to File > New > Class and name it StandardWebView.java. Select your package named com.androidbegin.WebViewTutorial and click Finish.

Open your StandardWebView.java and paste the following code.

StandardWebView.java

package com.androidbegin.webviewtutorial;

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

public class StandardWebView extends Activity {

	// Declare Variables
	WebView webview;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// Prepare the progress bar
		requestWindowFeature(Window.FEATURE_PROGRESS);
		// Get the view from webview.xml
		setContentView(R.layout.webview);

		// Locate the WebView in webview.xml
		webview = (WebView) findViewById(R.id.webview);

		// Enable Javascript to run in WebView
		webview.getSettings().setJavaScriptEnabled(true);

		// Allow Zoom in/out controls
		webview.getSettings().setBuiltInZoomControls(true);

		// Zoom out the best fit your screen
		webview.getSettings().setLoadWithOverviewMode(true);
		webview.getSettings().setUseWideViewPort(true);

		// Load URL
		webview.loadUrl("http://www.AndroidBegin.com");

		// Show the progress bar
		webview.setWebChromeClient(new WebChromeClient() {
			public void onProgressChanged(WebView view, int progress) {
				setProgress(progress * 100);
			}
		});

		// Call private class InsideWebViewClient
		webview.setWebViewClient(new InsideWebViewClient());

	}

	private class InsideWebViewClient extends WebViewClient {
		@Override
		// Force links to be opened inside WebView and not in Default Browser
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			view.loadUrl(url);
			return true;

		}

	}

}

In this activity, we have prepared a progress bar to show above the content view and enabled the website JavaScript in your WebView. Using BuiltInZoomControls allows users to zoom in or out the content of a WebView. To zoom fit the WebView before the content load, we used setLoadWithOverviewMode and setUseWideViewPort.

Next, create an activity for custom WebView. Go to File > New > Class and name it CustomWebView.java. Select your package named com.androidbegin.WebViewTutorial and click Finish.

Open your CustomWebView.java and paste the following code.

CustomWebView.java

package com.androidbegin.webviewtutorial;

import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;

public class CustomWebView extends Activity {

	// Declare Variables
	WebView webview;
	String htmlcodes;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.webview);
		webview = (WebView) findViewById(R.id.webview);

		// Custom HTML Codes
		htmlcodes = "<html><body>Custom HTML WebView Tutorial from AndroidBegin.com</body></html>";

		// Load the HTML Codes in WebView
		webview.loadData(htmlcodes, "text/html", "UTF-8");

	}

}

This activity will load a custom HTML script. To learn more about HTML, visit http://www.w3schools.com/.

Next, create an XML file the WebView. We will be using a single WebView XML File for both Standard WebView and Custom Webview graphical layout. Go to res > layout > Right Click on layout > New >Android XML File

Name your new XML file webview.xml and paste the following code.

webview.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

Change the application name and button texts in your strings.xml and paste the following code. Go to res > values > strings.xml

strings.xml

<resources>

    <string name="app_name">WebView Tutorial</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="standard">Standard WebView</string>
    <string name="custom">Custom WebView</string>

</resources>

In your AndroidManifest.xml, we need to declare 2 activities and a permission to allow the application to access to the Internet. Open your AndroidManifest.xml and paste the following code.

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidbegin.webviewtutorial"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

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

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".StandardWebView"
            android:configChanges="orientation|screenSize" >
        </activity>
        <activity
            android:name=".CustomWebView"
            android:configChanges="orientation|screenSize" >
        </activity>
    </application>

</manifest>

Output :

Source Code

[purchase_link id=”7854″ text=”Purchase to Download Source Code” style=”button” color=”green”]