Saturday, May 4, 2013

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;

    }

}



4 comments:

  1. This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.Android Training institute in chennai with placement | Android Training in chennai

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete

  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging.

    angularjs-Training in velachery

    angularjs-Training in annanagar

    angularjs Training in chennai

    angularjs Training in chennai

    ReplyDelete
  4. Your story is truly inspirational and I have learned a lot from your blog. Much appreciated.
    python training in tambaram | python training in annanagar | python training in jayanagar

    ReplyDelete