Tutorials Android ProgressBar while Loading WebView in Android

ProgressBar while Loading WebView in Android

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

Total
0
Shares
guest
15 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
atomnet
atomnet
8 years ago

Hello,
how to change color linear progressbar?

Thanks for tutorial.

javatechig
javatechig
8 years ago
Reply to  atomnet

You may follow similar tutorial below

Android Seekbar Example

Fire147
Fire147
7 years ago

Thanks so much for this example!

javatechig
javatechig
7 years ago
Reply to  Fire147

thank you.

janealam007
janealam007
7 years ago

Best web view tutorial, I ever see.

Anil
Anil
7 years ago

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
JavaTechig
7 years ago
Reply to  Anil

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

Nilanchala Panigrahy
Nilanchala Panigrahy
7 years ago

Can you paste your activity code?

Nilanchala Panigrahy
Nilanchala Panigrahy
7 years ago

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

arg
arg
6 years ago

android.permission.INTERNET

rohit malekar
rohit malekar
7 years ago

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

Carlo Eduardo Rodríguez Espino
Carlo Eduardo Rodríguez Espino
7 years ago

Thank you so much!

Anil Kumar Gollapalli
Anil Kumar Gollapalli
6 years ago

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

aghmet the suicide bomber
aghmet the suicide bomber
6 years ago

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.

Previous Post
Android Tutorials

Using External Fonts in Android View

Next Post
Android Tutorials

Android ViewFlipper Example- Creating Image Slideshow Using ViewFlipper

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
15
0
Would love your thoughts, please comment.x
()
x