Adding Progress Bar on Webview – Android Tutorials

When using the webview, something that drives me crazy, specially if you are in a place with a very slow internet connection, is not knowing what is happening with the webpage, is it loading? Is it stuck? …. AAAhhhh Nothing is happening. Ok don’t desperate, I am going to show you how to add a progress bar to your Webview layout in you app.
After you know what to do is easy (As always).
To learn how to create and app with a Webview and load an URL please go to the fallowing tutorial: “Using WebView with Multi-touch – Android Tutorial”

Let’s start:

You need to add the fallowing code some place in the class where you are calling the webview

 
             // Sets the Chrome Client, and defines the onProgressChanged
	    // This makes the Progress bar be updated.
	    final Activity MyActivity = this;
	    mWebView.setWebChromeClient(new WebChromeClient() {
        public void onProgressChanged(WebView view, int progress)   
        {
        	//Make the bar disappear after URL is loaded, and changes string to Loading...
        	MyActivity.setTitle("Loading...");
        	MyActivity.setProgress(progress * 100); //Make the bar disappear after URL is loaded

        	// Return the app name after finish loading
            if(progress == 100)
            	MyActivity.setTitle(R.string.app_name);
          }
        });

and also the fallowing code at the onCreate function:

 
                // Adds Progrss bar Support
		this.getWindow().requestFeature(Window.FEATURE_PROGRESS);
		setContentView(R.layout.main );
		
		// Makes Progress bar Visible
		getWindow().setFeatureInt(	Window.FEATURE_PROGRESS, Window.PROGRESS_VISIBILITY_ON);

The whole file, as used in our example :”Using WebView with Multi-touch – Android Tutorial” would looks as fallows:
All together in the .Java file

package firsrdroid.tutorial.mywebview;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class UsingMyWebview extends Activity {
	
	WebView mWebView;
	
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) 
	{
		super.onCreate(savedInstanceState);
		
		// Adds Progrss bar Support
		this.getWindow().requestFeature(Window.FEATURE_PROGRESS);
		setContentView(R.layout.main );
		
		// Makes Progress bar Visible
		getWindow().setFeatureInt(	Window.FEATURE_PROGRESS, Window.PROGRESS_VISIBILITY_ON); 

	    // Get Web view
	    mWebView = (WebView) findViewById( R.id.MyWebview ); //This is the id you gave 
	    													 //to the WebView in the main.xml
	    mWebView.getSettings().setJavaScriptEnabled(true);   
	    mWebView.getSettings().setSupportZoom(true);		 //Zoom Control on web (You don't need this 
	    													 //if ROM supports Multi-Touch		
	    mWebView.getSettings().setBuiltInZoomControls(true); //Enable Multitouch if supported by ROM
	   
	    // Load URL
	    mWebView.loadUrl("http://www.firstdroid.com/advertisement.htm");
	    
	    
	    // Sets the Chrome Client, and defines the onProgressChanged
	    // This makes the Progress bar be updated.
	    final Activity MyActivity = this;
	    mWebView.setWebChromeClient(new WebChromeClient() {
        public void onProgressChanged(WebView view, int progress)   
        {
        	//Make the bar disappear after URL is loaded, and changes string to Loading...
        	MyActivity.setTitle("Loading...");
        	MyActivity.setProgress(progress * 100); //Make the bar disappear after URL is loaded

        	// Return the app name after finish loading
            if(progress == 100)
            	MyActivity.setTitle(R.string.app_name);
          }
        });
	    
	    
	    
	}//End of Method onCreate
}

That is all. Now you have a lovely progress bar, and you can make the thousands of users using your app happy, because now they really know that the webpage is not loading!!!

Enjoy,
George – The Droid.


Click here to Download Tutorials Source Files