Tutorial

Android WebView Example Tutorial

Published on August 3, 2022
Default avatar

By Anupam Chugh

Android WebView Example Tutorial

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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

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. 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() method returns false, the URLs passed as 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 fired. 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 lets look at another important feature.

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 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);
    }

}

Below image shows the output produced by our project, you can see that WebView is loaded with a preassigned url. android webview example

Alternatives for Loading Content in the WebView

Till now we’ve just used loadUrl() method to load the contents in the WebView. Here we’ll see the other ways to load content after a quick briefing of the usages of loadUrl(). loadUrl() works with:

  • https:// and https://URLs
  • file:// URLs pointing to the local filesystem
  • file:///android_asset/ URLs pointing to one of your applications assets
  • content:// URLs pointing to a ContentProvider that is publishing content available for streaming

Instead of loadUrl() we can use loadData() by which we can display snippets or whole of the HTML code in the method. There are two flavors of loadData(). The simpler one allows us to provide the content, the MIME type, and the encoding, all as strings. Typically, MIME type will be text/html and the encoding will be UTF-8 for ordinary HTML as shown below:

webView.loadData("<html><body>Hello, world!</body></html>",
                  "text/html", "UTF-8");

Below is the output when the above snippet is added in the MainActivity as shown below:

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");
        webView.loadData("<html><body>Hello, world!</body></html>", "text/html", "UTF-8");
    }


    @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);
    }

}

android webview There is also a loadDataWithBaseURL() method. This takes, among other parameters, the base URL to use when resolving relative URLs in the HTML. Any relative URL (e.g., <img src=“images/sample.png”>) will be interpreted as being relative to the base URL supplied to loadDataWithBaseURL(). The historyUrl parameter is the URL to write into the WebView internal navigation history for the HTML loaded into the WebView. The following snippet shows a prototype for it:

String baseUrl    = "https://www.journaldev.com";
String data       = "Relative Link";
String mimeType   = "text/html";
String encoding   = "UTF-8";
String historyUrl = "https://www.journaldev.com";

webView.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl);

This brings an end to android WebView example tutorial. You can download final android webview project from below link.

Download Android WebView Example Project

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Anupam Chugh

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
JournalDev
DigitalOcean Employee
DigitalOcean Employee badge
November 30, 2021

hi thanks a lot. but android studio in AndroidManifest.xml file shows error messages as below: Manifest merger failed with multiple errors, see logs E/wifi_forwarder: RemoteConnection failed to initialize: RemoteConnection failed to open pipe 2021-11-30 11:45:20.478 0-0/? D/logd: logdr: UID=2000 GID=2000 PID=11351 b tail=0 logMask=99 pid=0 start=0ns timeout=0ns 2021-11-30 11:45:37.747 549-599/system_process I/UsageStatsService: User[0] Flushing usage stats to disk please help me

- hosein

    JournalDev
    DigitalOcean Employee
    DigitalOcean Employee badge
    November 29, 2021

    hi thanks for your tutorial, but android studio shows error message about AndroidManifest.xml file as below: AAPT: error: unexpected element found in . how to fix this error?

    - hosein

      JournalDev
      DigitalOcean Employee
      DigitalOcean Employee badge
      July 4, 2021

      I tried this sample on Android Studio He doesn’t work and I got this message: Microsoft Windows [Version 10.0.19041.1052] © Microsoft Corporation. Todos os direitos reservados. C:\Users\ruide\AndroidStudioProjects\Webviewer>C:/Users/ruide/AndroidStudioProjects/Webviewer/gradlew Error: Could not find or load main class org.gradle.wrapper.GradleWrapperMain C:\Users\ruide\AndroidStudioProjects\Webviewer> Can help, please? Best regards Rui

      - Rui

        JournalDev
        DigitalOcean Employee
        DigitalOcean Employee badge
        May 18, 2021

        Nice, could you please add an example for an alternative URL (in case the server is down/some error) - then fail over to another URL?

        - André

          JournalDev
          DigitalOcean Employee
          DigitalOcean Employee badge
          February 24, 2021

          Hi, i hope you all are doing great and enjoy a healthy life; I have one query ,plz solve this ASAP, which is ,i successfully show firebase data of multiple patients in webview table, but now i want to display this data in pdf as well by using paint, canvas, plz tell me how can i do this.

          - Easha Khan

            JournalDev
            DigitalOcean Employee
            DigitalOcean Employee badge
            February 12, 2021

            Thank for your great tutorial. can i retrieve frame by frame a video on webview ?

            - xavier

              JournalDev
              DigitalOcean Employee
              DigitalOcean Employee badge
              January 9, 2021

              how can i load a base64 Html file in the web view

              - Benjamin

                JournalDev
                DigitalOcean Employee
                DigitalOcean Employee badge
                December 22, 2020

                Tutorial perform an important task to understand a new technology and ideas shar in the market place.

                - create an iphone app

                  JournalDev
                  DigitalOcean Employee
                  DigitalOcean Employee badge
                  October 24, 2020

                  Great tutorial, I just make a webview for youtube for my mon. Because the youtube app from google don’t work and also dont work the google play store… thanks so much. Greetings from Peru.

                  - Freddy

                    JournalDev
                    DigitalOcean Employee
                    DigitalOcean Employee badge
                    October 8, 2020

                    This is an excellent and complete how-to for programmers new to Android. Thanks a lot man!

                    - Martin

                      Try DigitalOcean for free

                      Click below to sign up and get $200 of credit to try our products over 60 days!

                      Sign up

                      Join the Tech Talk
                      Success! Thank you! Please check your email for further details.

                      Please complete your information!

                      Get our biweekly newsletter

                      Sign up for Infrastructure as a Newsletter.

                      Hollie's Hub for Good

                      Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

                      Become a contributor

                      Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

                      Welcome to the developer cloud

                      DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

                      Learn more
                      DigitalOcean Cloud Control Panel