Android WebView with Indeterminate, Determinate Horizontal Progress Bar

By Arvind Rai, June 27, 2015
Android
In this page we will walk through the android WebView with indeterminate, determinate horizontal progress bar example with WebViewClient, WebChromeClient and back button. Using WebView we load a web page in activity layout. Layout can be configured with other button or progress bar. Android ProgressBar provides determinate and indeterminate progress bar. WebViewClient and WebChromeClient has methods using which we handle the start, stop and increase of progress bar. In the layout XML, we have to configure WebView and ProgressBar element. Here in this page we will provide two examples for WebView, one with indeterminate acyclic animation progress bar and another with determinate horizontal progress bar.
Contents

WebView

android.webkit.WebView is a view that displays web pages on our layout. We can navigate forward backward using history and zoom in and zoom out. We can also perform text searches. Our activity needs to be given internet permission. To use WebView we need to add web view layout. 
<WebView
     android:id="@+id/webView"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:layout_below="@id/progressBar" />
And then instantiate it as below. 
WebView webView = (WebView) findViewById(R.id.webView);
webView.setWebViewClient(new WebViewClientDemo());
webView.setWebChromeClient(new WebChromeClientDemo());
If we want to enable javascript, do it as below. 
webView.getSettings().setJavaScriptEnabled(true);
And finally load URL. 
webView.loadUrl("http://www.concretepage.com");
Our activity needs internet permission to open pages in web view. So add permission in AndroidManifest.xml. 
<uses-permission android:name="android.permission.INTERNET" />

ProgressBar

android.widget.ProgressBar is a visual indicator of operation progress. Progress bar can be of two types determinate and indeterminate. In determinate progress bar, we can have a horizontal progress bar which keeps on increasing till operation completes. It facilitates user to check what amount of operation is completed. In indeterminate progress, it can be cyclic animation or horizontal bar which does not display the progress of operation. It started once the operation started and disappeared once completed. To create a progress bar, first introduce progress bar in layout. 
<ProgressBar
     android:id="@+id/progressBar"
     android:minHeight="5dip"
     android:maxHeight="5dip" 
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     style="@android:style/Widget.ProgressBar.Horizontal" />
Now instantiate progress bar and set max amount after which progress bar will finish. 
ProgressBar progressBar progressBar = (ProgressBar)findViewById(R.id.progressBar);
progressBar.setMax(100);

WebViewClient

android.webkit.WebViewClient has different methods that is helpful to show progress bar and override other link to open in web view.
shouldOverrideUrlLoading(WebView view, String url) : Returns boolean. if true, all links will be opened in same web view.
onPageFinished(WebView view, String url) : It is called when page load is finished. It can be used to complete progress bar.
onPageStarted(WebView view, String url, Bitmap favicon): It is called when page starts opening. We can use this method to start progress bar.

WebChromeClient

android.webkit.WebChromeClient can be used with WebView . We can use it to display determinate progress bar using one of its method as given below.
onProgressChanged(WebView view, int progress) : With the progress of loading of webpages, this method is called. Here we can set current status of progress bar.

How to Go Back and Forward in WebView

To handle backward and forward of pages in web view, we can override onKeyDown(int keyCode, KeyEvent event) in our activity class and call 
webView.goBack();
webView.goForward();
To use it like go back we need to check first if key down is back button.

Android WebView with Indeterminate Progress Bar Example

Here we will provide an example to open a website in web view that will have an indeterminate cyclic animation as progress bar.
MainActivity.java 
package com.concretepage;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
public class MainActivity extends Activity{
    private ProgressBar progressBar;
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        progressBar.setVisibility(View.GONE);
        WebView webView = (WebView) findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClientDemo());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("http://www.concretepage.com");
    }
    private class WebViewClientDemo extends WebViewClient {
	@Override
	public boolean shouldOverrideUrlLoading(WebView view, String url) {
	    view.loadUrl(url);
	    return true;
	}
	@Override
	public void onPageFinished(WebView view, String url) {
	   super.onPageFinished(view, url);
	   progressBar.setVisibility(View.GONE);
	   progressBar.setProgress(100);
	}
	@Override
	public void onPageStarted(WebView view, String url, Bitmap favicon) {
	   super.onPageStarted(view, url, favicon);			 
	   progressBar.setVisibility(View.VISIBLE);
	   progressBar.setProgress(0);
	}	    
    }
}

main.xml 
<?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">
    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        style="@android:style/Widget.ProgressBar.Small" />
    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/progressBar" />
</RelativeLayout>

AndroidManifest.xml 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.concretepage"
    android:versionCode="3"
    android:versionName="1.2" >
    <uses-sdk android:minSdkVersion="11"/>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup ="false"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity  android:name=".MainActivity" android:theme="@android:style/Theme.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

strings.xml 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Concretepage</string>
</resources>

Output

Android WebView with Indeterminate, Determinate Horizontal Progress Bar Example with WebViewClient, WebChromeClient and Back Button

Download Source Code

Android WebView with Indeterminate Progress Bar Example


Android WebView with Determinate Horizontal Progress Bar Example with Back Button

Here we will open a website in web view that will have a determinate horizontal progress bar and back button.
MainActivity.java 
package com.concretepage;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
public class MainActivity extends Activity{
	private ProgressBar progressBar;
	private WebView webView;
        @SuppressLint("SetJavaScriptEnabled") 
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            progressBar = (ProgressBar) findViewById(R.id.progressBar);
            progressBar.setMax(100);
            webView = (WebView) findViewById(R.id.webView);
            webView.setWebViewClient(new WebViewClientDemo());
            webView.setWebChromeClient(new WebChromeClientDemo());
            webView.getSettings().setJavaScriptEnabled(true);
            webView.loadUrl("http://www.concretepage.com");
        }
        private class WebViewClientDemo extends WebViewClient {
	    @Override
	    public boolean shouldOverrideUrlLoading(WebView view, String url) {
	        view.loadUrl(url);
	        return true;
	    }
	    @Override
	    public void onPageFinished(WebView view, String url) {
    		super.onPageFinished(view, url);
		progressBar.setVisibility(View.GONE);
		progressBar.setProgress(100);
	    }
 	    @Override
	    public void onPageStarted(WebView view, String url, Bitmap favicon) {
		super.onPageStarted(view, url, favicon);
		progressBar.setVisibility(View.VISIBLE);
		progressBar.setProgress(0);
	    }	    
	}
        private class WebChromeClientDemo extends WebChromeClient {
   	    public void onProgressChanged(WebView view, int progress) {
 	    progressBar.setProgress(progress);
        }
    }
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        else {
            finish();
        }
        return super.onKeyDown(keyCode, event);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       return true;
    }
}

main.xml 
<?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">
    <ProgressBar
        android:id="@+id/progressBar"
        android:minHeight="5dip"
        android:maxHeight="5dip" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="@android:style/Widget.ProgressBar.Horizontal" />
    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/progressBar" />
</RelativeLayout>

Output

Android WebView with Indeterminate, Determinate Horizontal Progress Bar Example with WebViewClient, WebChromeClient and Back Button

Download Source Code

Android WebView with Determinate Horizontal Progress Bar Example
RELATED POST

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE
JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5








©2024 concretepage.com | Privacy Policy | Contact Us