Android WebView Display Loading Percentage

Android WebView Display Loading Percentage

In one of our android app we need to use WebView with a progress bar. We need to display the progress of page load in WebView using progress bar. In this article we are going to learn

How to display WebView Loading Progress?

How to display Progress Percentage for WebView?

If you don’t want to read the entire article feel free to check below video tutorial.

As show in the above video below is the code which you need to use.

Let’s start by creating our Layout. Below Code is going to add a WebView, ProgressBar and TextView in our Main Layout.

Code

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.vlemonn.blog.webviewprogress.MainActivity">
    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        style="?android:attr/progressBarStyleHorizontal"
        />
    <TextView android:id="@+id/textView1212"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="wrap_content"></WebView>
</LinearLayout>

In our main layout we added a WebView to load a web page. We have a progress bar and TextView to display the webpage loading progress.

Before modifying MainActivity.java file we need to add Internet permission. For this we need to add below line in our android manifest file.

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

Now we need to modify our mainactivity.java file to dsiplay the progress.

Below is the code for MainActivity.java.

Code

package com.vlemonn.blog.webviewprogress;

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

public class MainActivity extends AppCompatActivity {

    ProgressBar progressBar;
    WebView webView;
    String url="https://www.vlemonn.com/";
    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        webView = (WebView) findViewById(R.id.webView);
        textView = (TextView) findViewById(R.id.textView1212);

        webView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {

                progressBar.setProgress(progress);
                textView.setText(progress + " %");
            }
        });
        webView.setWebViewClient(new MyWebViewClient());
        WebSettings browserSetting = webView.getSettings();
        browserSetting.setJavaScriptEnabled(true);
        webView.loadUrl(url);
    }


    private class MyWebViewClient extends WebViewClient {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            //progressBar.setVisibility(View.VISIBLE);
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            //progressBar.setVisibility(View.VISIBLE);
            view.loadUrl(url);
            return true;
            //return super.shouldOverrideUrlLoading(view, url);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            //progressBar.setVisibility(View.GONE);
        }
    }
}

Now in this we need to focus onProgressChanges listener. This listner is responsible to display the WebView Progress. In this we are changing the progressBar progress and TextView Text.

Before we executed our application below is the color.xml file in case you are going to use mentioned code as it is.

Code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#333333</color>
    <color name="colorPrimaryDark">#1d1d1d</color>
    <color name="colorAccent">#e3c800</color>
    <color name="colorProgress">#7ad61d</color>
</resources>

Finally, it’s time to execute our app. Below is the output for our app.

 

 

Exercise:

You can play with progress bar. You can also try to hide the ProgressBar when progress is equals to 100. Please share the code to control the visibility of progress bar and function where you need to add codes.

If you want to check the source code it is available below.

FileDownload
LoadingPercentage.zipLogin to Download
0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share