Android Webview | Progress Bar Dialog, Back Navigation, JavaScript

webview progress bar dialog android

Hello, Geeks. Welcome to Android Webview Tutorial with Example.

WebView is specially designed to load a any website into your android application.

You can control the layout into which a particular web address(URL) will be loaded.

Webview gives us full control like Linearlayout or Relativelayout, so that we can defined how many portion of screen will be covered by WebView.

1. Android WebView With Progress Bar

You will learn how to load URL into WebView of Android app in WebView progress bar dialog Android tutorial.

We will show a progress bar as a loading indicator in WebView.

First check output of tutorial then develops the example.

Step2: Updating AndroidManifest.xml file

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

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

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"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.exampledemo.parsaniahardik.webviewprogressdemonuts.MainActivity">

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

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

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;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    // Button btn;
    // TextView txt;
    WebView wv;
    ProgressBar progressBar;
    String url = "http://demonuts.com/2017/02/07/google-plus-login-sign-in-integration-android/";

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

        // btn = (Button) findViewById(R.id.button);
        // txt = (TextView) findViewById(R.id.editText);
        wv = (WebView) findViewById(R.id.webView);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        // wv.setWebViewClient(new MyBrowser());


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

    }


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

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

You can defined all the logic which you want to get run when URL is completely loaded.

Here we have remove the progress bar.

If you are finding any difficulties implementing this tutorial, then you can ask your question in the comment section.

So all for Webview progress bar dialog android studio programmatically example. Thank you.