Android Webview Back Button Forward Navigation Button In Android Studio

android webview back button

Hello, learners. Welcome to Android Webview Back Button Navigation In Android Studio example.

You will implement Webview with a previous and next buttons in this Android Webview Back Button Navigation In Android Studio tutorial.

If you want to load the whole website in WebView, then navigation buttons are useful.

If you follow this tutorial, you will not have any questions like webview back button not working or so.

First, check the output of Android Webview Back Button Navigation tutorial and then we will develop it.

Download Source Code For Android Webview Back Button Navigation

[sociallocker] Download Source Code[/sociallocker]

Step 1: Create a new project in Android Studio.

Step 2: Updating AndroidManifest.xml file

 add required permissions between <manifest>….</manifest> tag.

 <uses-permission android:name="android.permission.INTERNET" />
Note: If you are targeting SDK version above 22 (Above Lollipop)  then you need to ask a user for granting runtime permissions.  Check marshmallow runtime permission for more information.

Step 3: Update activity_main.xml file

Copy and paste below source code in activiry_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.exampledemo.parsaniahardik.webviewprogressdemonuts.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnprev"
            android:text="Previous"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnnext"
            android:text="Next"/>

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/webView"
            android:layout_marginTop="100dp" />

    </RelativeLayout>


</LinearLayout>

Step 4: Prepare MainActivity.java class

Add following source code in MainActivity.java

import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    Button btnnext, btnpre;
    WebView wv;
    ProgressBar progressBar;
    String url = "http://google.com";

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

        btnnext = (Button) findViewById(R.id.btnnext);
        btnpre = (Button) findViewById(R.id.btnprev);

        wv = (WebView) findViewById(R.id.webView);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);

        wv.setWebViewClient(new myWebClient());
        wv.getSettings().setJavaScriptEnabled(true);
        wv.getSettings().setBuiltInZoomControls(true);
        wv.getSettings().setDisplayZoomControls(false);
        wv.loadUrl(url);

        btnpre.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub

                if (wv.canGoBack()) {
                    wv.goBack();
                }
            }
        });
        btnnext.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub

                if(wv.canGoForward()){
                    wv.goForward();
                }
            }
        });

    }


    public  class myWebClient extends WebViewClient{

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            progressBar.setVisibility(View.VISIBLE);
            view.loadUrl(url);
            return true;

        }

        @Override
        public void onPageFinished(WebView view, String url) {

            super.onPageFinished(view, url);
            progressBar.setVisibility(View.GONE);
        }

    }

}

Step 5: Description of MainActivity.java class

Following will initialize WebView instance

        wv.setWebViewClient(new myWebClient());
        wv.getSettings().setJavaScriptEnabled(true);
        wv.getSettings().setBuiltInZoomControls(true);
        wv.getSettings().setDisplayZoomControls(false);
        wv.loadUrl(url);

Logic to go to the previous page is as below

It will check whether WebView can go to the previous page or not. If able, then it will perform the previous operation.

 btnpre.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub

                if (wv.canGoBack()) {
                    wv.goBack();
                }
            }
        });

Logic to go to next page is as below. It will check whether WebView can go to next page or not. If it is able, then it will go to next page.

  btnnext.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub

                if(wv.canGoForward()){
                    wv.goForward();
                }
            }
        });

Below class contains three methods

 public  class myWebClient extends WebViewClient{

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            progressBar.setVisibility(View.VISIBLE);
            view.loadUrl(url);
            return true;

        }

        @Override
        public void onPageFinished(WebView view, String url) {

            super.onPageFinished(view, url);
            progressBar.setVisibility(View.GONE);
        }

    }

The First method is calling when URL has started loading

  @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

The Second method will override URL loading. We will set progressBar to visible in this method.

 @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            progressBar.setVisibility(View.VISIBLE);
            view.loadUrl(url);
            return true;

        }

The Third method will be called when URL has finished loading.

We will set progressBar’s visibility to GONE here.

 @Override
        public void onPageFinished(WebView view, String url) {

            super.onPageFinished(view, url);
            progressBar.setVisibility(View.GONE);
        }

Feel free to revert back to comment section for any queries.

So all for Webview With Back And Next Navigation Button In Android Studio example. Thank you.