ProgressBar while Loading WebView in Android

0 0 vote

Article Rating

This tutorial demonstrate the usage of ProgressBar while Loading WebView contents in android. This example explains horizontal ProgressBar and ProgressBar dialog with WebView.

Progressbar is a visual indicator of progress in some operation. Displays a bar to the user representing how far the operation has progressed; the application can change the amount of progress (modifying the length of the bar) as it moves forward. There is also a secondary progress displayable on a progress bar which is useful for displaying intermediate progress, such as the buffer level during a streaming playback progress bar.

A progress bar can also be made indeterminate. In indeterminate mode, the progress bar shows a cyclic animation without an indication of progress. This mode is used by applications when the length of the task is unknown. The indeterminate progress bar can be either a spinning wheel or a horizontal bar

1. Determinate Progress Bar Example

Here is my layout

<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=".WebViewActivity" >

    <LinearLayout
        android:id="@+id/urlContainer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <EditText
            android:id="@+id/urlField"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:hint="Enter URL to open" />

        <Button
            android:id="@+id/goButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Open" />
    </LinearLayout>

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/urlContainer" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/progressBar" />

</RelativeLayout>

Do the following changes in your java code

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;

public class WebViewActivity extends Activity {
	private WebView webView;
	private EditText urlEditText;
	private ProgressBar progress;

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

		urlEditText = (EditText) findViewById(R.id.urlField);
		webView = (WebView) findViewById(R.id.webView);
		webView.setWebChromeClient(new MyWebViewClient());

		progress = (ProgressBar) findViewById(R.id.progressBar);
		progress.setMax(100);

		Button openUrl = (Button) findViewById(R.id.goButton);
		openUrl.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View view) {
				String url = urlEditText.getText().toString();
				if (validateUrl(url)) {
					webView.getSettings().setJavaScriptEnabled(true);
					webView.loadUrl(url);

					WebViewActivity.this.progress.setProgress(0);
				}
			}

			private boolean validateUrl(String url) {
				return true;
			}
		});

	}

	private class MyWebViewClient extends WebChromeClient {	
		@Override
		public void onProgressChanged(WebView view, int newProgress) {			
			WebViewActivity.this.setValue(newProgress);
			super.onProgressChanged(view, newProgress);
		}
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.web_view, menu);
		return true;
	}

	public void setValue(int progress) {
		this.progress.setProgress(progress);		
	}
}

Output of the above program is

2. Indeterminate Progress Bar Example

In the above layout xml file, do the following changes

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        android:layout_below="@id/urlContainer" />

Below is my activity java class

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;

public class WebViewActivity extends Activity {
	private WebView webView;
	private EditText urlEditText;
	private ProgressBar progress;

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

		urlEditText = (EditText) findViewById(R.id.urlField);
		webView = (WebView) findViewById(R.id.webView);
		webView.setWebViewClient(new MyWebViewClient());

		progress = (ProgressBar) findViewById(R.id.progressBar);
		progress.setVisibility(View.GONE);
		Button openUrl = (Button) findViewById(R.id.goButton);
		openUrl.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View view) {
				String url = urlEditText.getText().toString();
				if (validateUrl(url)) {
					webView.getSettings().setJavaScriptEnabled(true);
					webView.loadUrl(url);

				}
			}

			private boolean validateUrl(String url) {
				return true;
			}
		});

	}

	private class MyWebViewClient extends WebViewClient {	
		 @Override
		    public boolean shouldOverrideUrlLoading(WebView view, String url) {
		        view.loadUrl(url);
		        return true;
		    }

		 @Override
		public void onPageFinished(WebView view, String url) {
			 progress.setVisibility(View.GONE);
				WebViewActivity.this.progress.setProgress(100);
			super.onPageFinished(view, url);
		}

		 @Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			 progress.setVisibility(View.VISIBLE);
			WebViewActivity.this.progress.setProgress(0);
			super.onPageStarted(view, url, favicon);
		}
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.web_view, menu);
		return true;
	}

	public void setValue(int progress) {
		this.progress.setProgress(progress);		
	}
}

Below is the Output of the above code

Code Sample

Written by Nilanchala

A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (goo.gl/qUZ0XV3), DZone MVB and founder of stacktips.com.

Discussions

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.

15 Comments

Most Voted

Newest Oldest

Inline Feedbacks

View all comments

aghmet the suicide bomber

Apr 14, 2016 3:28 PM

https://www.codester.com/items/1557/android-webview-application-template?ref=techtasys

Just use these codes, i bought it. it includes webview, loading screen and free push notification service. It’s documentation is well written. you can understand easily.

Anil Kumar Gollapalli

Mar 18, 2016 8:20 PM

hello the wcode which given buy you is not woking..it was executing without errors and doesnt opening any page plz send me the solution

Carlo Eduardo Rodríguez Espino

Jul 29, 2015 6:44 AM

Thank you so much!

rohit malekar

Mar 30, 2015 1:34 PM

i need code to send web address from first activity and send it to 2nd activity where webview is attached

Nilanchala Panigrahy

Reply to rohit malekar

Mar 30, 2015 4:38 PM

following two examples will help

http://stacktips.com/android/pass-a-data-from-one-activity-to-another-in-android#41-defining-case-study-layouts
http://stacktips.com/android/navigation-drawer-android-example

Nilanchala Panigrahy

Feb 27, 2015 1:05 AM

Just checking if you have added INTERNET permission to your manifest.xml. If not than just add the below code inside tag

arg

Reply to Nilanchala Panigrahy

Sep 15, 2015 7:38 AM

android.permission.INTERNET

Nilanchala Panigrahy

Feb 27, 2015 1:02 AM

Can you paste your activity code?

Anil

Feb 26, 2015 6:03 PM

Thanks for the tutorial. It’s working when using it this way.
But not working in my case, I want to pre-load a url when user opens the app and there’s no editText and Button. Please tell me how can I implement the progressbar in this case.

JavaTechig

Reply to Anil

Feb 26, 2015 8:36 PM

Do the following changes in your onCreate method. It should work

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

webView = (WebView) findViewById(R.id.webView);
webView.setWebViewClient(new MyWebViewClient());
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(url);

progress = (ProgressBar) findViewById(R.id.progressBar);
progress.setVisibility(View.VISIBLE);
}

janealam007

Dec 5, 2014 1:07 AM

Best web view tutorial, I ever see.

Fire147

Sep 7, 2014 8:08 PM

Thanks so much for this example!

javatechig

Reply to Fire147

Sep 7, 2014 8:11 PM

thank you.

atomnet

Nov 16, 2013 11:20 AM

Hello,
how to change color linear progressbar?

Thanks for tutorial.

1. Determinate Progress Bar Example

2. Indeterminate Progress Bar Example

Written by Nilanchala

Read next..

Discussions

Thank you for reading our tutorials.