Implementing WebView In Android

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



    

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 = "Custom HTML WebView Tutorial from AndroidBegin.com";

		// 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


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

strings.xml



    WebView Tutorial
    Hello world!
    Settings
    Standard WebView
    Custom WebView

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



    

    

    
        
            
                

                
            
        
        
        
        
        
    

Output :

WebView Tutorial ScreenShots

Source Code 

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