Simple Android WebView Example and Tutorial

A android WebView is a View that displays any website to your android application. WebView also allows you to use HTML string, CSS and JavaScript design to your application. WebView embed website into your android application. 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.

In this Simple Android WebView Example, I will teach you how to display website to your android application, enabling JavaScript and handling link clicks in your WebView. Let’s start step by step.

How to Load HTML Data/String on Android WebView Application

Implementing Navigation Back Feature to Android WebView Application

Simple Android WebView Example Demo:

Step 1: Creating Android Project:

Before jumping to our coding part let’s create a new android project for WebView Application with following information:

Application name: Simple Android WebView Example

Company Domain: sirseni.com

Package name: com.sirseni.simpleandroidwebviewexample

Minimum SDK: Android 2.2 (API 8 Froyo)

Step 2: Adding WebView to Your activity_main.xml file:

To add WebView to your application, you have to add <WebView> element to your xml layout. Simply copy and paste following code to your layout file.

res/layout/activity_main.xml

<webview android:id="@+id/myWebView" android:layout_height="fill_parent" android:layout_width="fill_parent" android:scrollbars="none" xmlns:android="http://schemas.android.com/apk/res/android">
</webview>

Step 3: Modify your MainActivity.java file:

To load your website in your application you have to use loadUrl().

WebView myWebView = (WebView)
findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

Here is complete code of your java file.

src/MainActivity.java

package com.sirseni.simpleandroidwebviewexample;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
      
super.onCreate(savedInstanceState);
      
setContentView(R.layout.activity_main);

      
WebView myWebView = (WebView) findViewById(R.id.myWebView);
      
myWebView.loadUrl("http://www.centerend.com");
      
myWebView.setWebViewClient(new MyWebViewClient());
      
WebSettings webSettings = myWebView.getSettings();
      
webSettings.setJavaScriptEnabled(true);
    }

    // Use When
the user clicks a link from a web page in your WebView
    private class MyWebViewClient extends WebViewClient {
      
@Override
      
public boolean shouldOverrideUrlLoading(WebView view, String url) {
          
if (Uri.parse(url).getHost().equals("www.centerend.com")) {
              
return false;

            }
           
          
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
          
startActivity(intent);
          
return true;
        }
    }
}

How to Load HTML Data/String on Android WebView Application

Implementing Navigation Back Feature to Android WebView Application

Step 4: Modify AndroidManifest.xml file:

You must add the INTERNET permission to your AndroidManifest.xml file to load
website in your application. So before running your WebView application, add single line code to your Android Manifest file.

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

Final Code of AndroidManifest.xml

<manifest package="com.sirseni.simpleandroidwebviewexample" xmlns:android="http://schemas.android.com/apk/res/android">

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

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

                <category android:name="android.intent.category.LAUNCHER">
            </category></action></intent-filter>
        </activity>
    </application>

</uses-permission></manifest>

That’s all! Now run your Simple Android WebView Example application by just clicking Run icon, your application is looks like video presented below:


That’s all! Now run your Simple Android WebView Example application by just clicking Run icon, your application is looks like video presented below:

Download Complete Example Project

Download complete Simple Android WebView example project source code from GitHub.