Android WebView Example Tutorial

Android WebView is used to display HTML in an android app. We can use android WebView to load the HTML page into an android app.

Table of Contents

• 1 Android WebView
  • 1.1 Importance Of Android WebView
  • 1.2 Android WebView Example
  • 1.3 Android Studio WebView Code
  • 1.4 Android WebView load Url
  • 1.5 Setting the WebViewClient
  • 1.6 Navigation WebView with Back Button
  • 1.7 Alternatives for Loading Content in the WebView

Android WebView

Android WebView component is a full-fledged browser implemented as a View subclass to embed it into our android application.

Importance Of Android WebView

For HTML code that is limited in terms of scope, we can implement the static method fromHtml() that belongs to the HTML Utility class for parsing HTML-formatted string and displaying it in a TextView.

TextView can render simple formatting like styles (bold, italic, etc.), font faces (serif, sans serif, etc.), colors, links, and so forth.

However, when it comes to complex formatting and larger scope in terms of HTML, then TextView fails to handle it well. For example browsing, Facebook won’t be possible through a TextView.

In such cases, WebView will be the more appropriate widget, as it can handle a much wider range of HTML tags. WebView can also handle CSS and JavaScript, which Html.fromHtml() would simply ignore it.

WebView can also assist with common browsing metaphors, such as history list of visited URLs to support backwards and forwards navigation.

Still WebView comes with its own set of cons such as it’s a much more expensive widget to use, in terms of memory consumption than a TextView. The reason for this increased memory is because WebView is powered by WebKit/Blink that are open source Web rendering engine to power content in browsers like Chrome.

Android WebView Example

Android WebView component is inserted into the XML layout file for the layout we want the WebView to be displayed in. In this example we insert it into the activity_main.xml file as shown below:

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

Android Studio WebView Code

WebView component is initialized in the MainActivity using its id defined in the activity_main.xml as shown in snippet below:

WebView webView = (WebView) findViewById(R.id.webview);

Android WebView loadUrl

Once we’ve obtained a reference to the WebView we can configure it and load URLs via HTTP. WebView loadUrl() method is used to load the URL into the WebView as shown below:

webView.loadUrl("https://www.journaldev.com");

Before we start toying around with the url there are two critical aspects we should take a look at:

1. Supporting JavaScript: JavaScript is by default turned off in WebView widgets. Hence web pages containing javascript references won’t work properly. To enable java script the following snippet needs to be called on the webview instance:

   
   getSettings().setJavaScriptEnabled(true);
   

2. Adding Permissions: To fetch and load the urls in the WebView we need to add permissions to access the internet from within the app else it won’t be able to load the webpages. The following line of code needs to be added in the AndroidManifest.xml file above the application tag as shown below:

   
   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="https://schemas.android.com/apk/res/android"
       package="com.journaldev.webview" >
   
       <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:name=".MainActivity"
               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>
   
   </manifest>
   

The MainAcivity class below contains all the features discussed till now.

package com.journaldev.webview;

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

public class MainActivity extends Activity {

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

        WebView webView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.loadUrl("https://www.journaldev.com");
    }

}

Setting the WebViewClient

The default behavior, when a user clicks on a link inside the webpage, is to open the systems default browser app. This can break the user experience of the app users.

To keep page navigation within the WebView and hence within the app, we need to create a subclass of WebViewClient, and override its shouldOverrideUrlLoading(WebView webView, String url) method.

Here is how such a WebViewClient subclass would look:

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        return false;
    }
}

When the shouldOverrideUrlLoading() the method returns false, the URLs passed as a parameter to the method is loaded inside the WebView instead of the browser.

To distinguish between the URLs that are loaded within the app and browser the following code needs to be added in the shouldOverrideUrlLoading() method:

if(url.indexOf("journaldev.com") > -1 ) return false;
        return true;

Note: Returning true doesn’t signify that the URL opens in the browser app. In fact, the URL won’t be opened at all. To load the URL into the browser an intent needs to fire. The following subclass contains all the configurations we’ve added.

package com.journaldev.webview;

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


public class WebViewClientImpl extends WebViewClient {

    private Activity activity = null;

    public WebViewClientImpl(Activity activity) {
        this.activity = activity;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        if(url.indexOf("journaldev.com") > -1 ) return false;

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

}

The constructor takes Activity as a parameter to fire an intent in the browser.

Before instantiating this subclass in the MainActivity let's look at another important feature.

Navigation WebView with Back Button

If we click the back button in the app developed so far we see that the application returns to the home screen even though we’ve navigated through a few pages within the WebView itself. To go through the browsing history on pressing back button we need to modify the back button function as shown in the snippet below:

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

The onKeyDown() method has been overridden with an implementation that first checks if the WebView can go back. If the user has navigated away from the first page loaded inside the WebView, then the WebView can go back.

The WebView maintains a browsing history just like a normal browser. If there is no history then it will result in the default behavior of the back button i.e. exiting the app.

Following is the code for MainActivity with the above features included.

package com.journaldev.webview;

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

public class MainActivity extends Activity {

    private WebView webView = null;

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

        this.webView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        WebViewClientImpl webViewClient = new WebViewClientImpl(this);
        webView.setWebViewClient(webViewClient);

        webView.loadUrl("https://www.journaldev.com");
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

}

The below image shows the output produced by our project, you can see that WebView is loaded with a preassigned URL.