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

progressbar-android

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

 progressbar1

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

 progressbar

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.

Related Articles

Join The Discussion

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

    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

    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

  • Thank you so much!

  • rohit malekar

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

  • Nilanchala Panigrahy

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

    • arg

      android.permission.INTERNET

  • Nilanchala Panigrahy

    Can you paste your activity code?

  • 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.

    • 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

    Best web view tutorial, I ever see.

  • Fire147

    Thanks so much for this example!

  • atomnet

    Hello,
    how to change color linear progressbar?

    Thanks for tutorial.