WebView Progress Bar

This post is going to show how to add a progress bar to a WebView, which can let the user know that there is something going on while your page loads. Some newer versions of Android may already have this built in, but the older versions of Android did not.

Basic WebView
First we need to setup a basic WebView to load a page. In your main activity add the following code to create a WebView:

package com.test.webviewprogbar;



import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.webkit.WebView;



public class MainActivity extends Activity {



WebView mWebView;


    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mWebView = (WebView)findViewById(R.id.webview);

        mWebView.loadUrl("http://devemat-androidprogramming.blogspot.com/");

    }



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.activity_main, menu);

        return true;

    }

}

Now in the activity_main.xml make sure it looks like this:

<?xml version="1.0" encoding="utf-8"?>

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/webview"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

 

/>

In the AndroidManifest.xml make sure to add internet permission when loading webpages. Add it after the end application tag, like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.test.webviewprogbar"

    android:versionCode="1"

    android:versionName="1.0" >



    <uses-sdk

        android:minSdkVersion="1"

        android:targetSdkVersion="15" />



    <application

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name=".MainActivity"

            android:label="@string/title_activity_main" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />



                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

<uses-permission android:name="android.permission.INTERNET"/>

</manifest>

Now is a good time to verify that the code is working okay so far.

Add Progress Bar
The following bit of code is all that is needed now to load a progress bar. You can also change how quickly it loads by changing the 100 to another number.

final Activity myActivity = this;

       

  mWebView.setWebChromeClient(new WebChromeClient(){

       public void onProgressChanged(WebView view, int progress){

       myActivity.setProgress(progress * 100);

}

});

Here is how MainActivity.java should look after adding the new code:

package com.test.webviewprogbar;



import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.webkit.WebChromeClient;

import android.webkit.WebView;



public class MainActivity extends Activity {



WebView mWebView;



    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mWebView = (WebView)findViewById(R.id.webview);

       

        final Activity myActivity = this;

       

        mWebView.setWebChromeClient(new WebChromeClient(){

public void onProgressChanged(WebView view, int progress){

myActivity.setProgress(progress * 100);

}

});

       

        mWebView.loadUrl("http://devemat-androidprogramming.blogspot.com/");

    }



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.activity_main, menu);

        return true;

    }

}