Showing indeterminate progress bar on title bar while loading URL in WebView

August 30, 2012
By

In the article titled “Showing Progress Bar and Preventing the opening of Web Browser on loading URL in WebView of Android“, we have seen how to add a determinate progress bar on a title bar while loading url in a WebView widget.

In this article, we will see how to add an indeterminate progress bar on title bar.

This application is developed in Eclipse ( 4.2.0 ) and ADT plugin ( 20.0.3 ) and Android SDK ( R20.0.3 ).


1. Create new Android application project titled “WebViewIndeterminateProgress”

New Android Application Project

Figure 1 : New Android Application Project


2. Design application launcher icon

Design Application Launcher Icon

Figure 2 : Design Application Launcher Icon


3. Create a blank activity

Create a blank Activity

Figure 3 : Create a blank Activity


4. Enter MainActivity details

Enter MainActivity Details

Figure 4 : Enter MainActivity Details


5. Delete the Android’s Support library from this project

By default Eclipse ( 4.2.0) adds Android Support Library to¬† Android application project. For this application, we don’t need to use this support library. So the library file libs/android-support-v4.jar may be removed manually via ProjectExplorer by simply right click on the file and then clicking the menu item “delete”.


6. Update the file res/values/strings.xml

<resources>

    <string name="app_name">WebViewIndeterminateProgress</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">Indefinite Progress</string>
    <string name="str_hnt_et_url">Enter URL</string>
    <string name="str_et_url">http://</string>
    <string name="str_btn_load">Load URL</string>

</resources>

7. Update the layout file res/layout/activity_main.xml

<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" >

    <EditText
        android:id="@+id/et_url"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/str_hnt_et_url"
        android:text="@string/str_et_url"
        android:inputType="textUri"
    />

    <Button
        android:id="@+id/btn_load"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/str_btn_load"
        android:layout_below="@id/et_url"
    />

    <WebView
        android:id="@+id/wv_url"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        tools:context=".MainActivity"
        android:layout_below="@id/btn_load"
    />

</RelativeLayout>


8. Update the MainActivity class in the file src/in/wptrafficanalyzer/webviewindeterminateprogress/MainActivity.java

package in.wptrafficanalyzer.webviewindeterminateprogress;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends Activity {

    WebView mWvUrl;

    @Override
    public void onCreate(Bundle savedInstanceState) {

        final Activity activity = this;

        super.onCreate(savedInstanceState);

        /** Enabling Progress bar for this activity */
        getWindow().requestFeature(Window.FEATURE_INDETERMINATE_PROGRESS);

        setContentView(R.layout.activity_main);

        mWvUrl = (WebView) findViewById(R.id.wv_url);

        /** Enabling Javascript for the WebView */
        mWvUrl.getSettings().setJavaScriptEnabled(true);

        OnClickListener btnLoadClickListener = new OnClickListener() {
            @Override
            public void onClick(View v) {

                /** Getting reference to edittext widget
                  * of the layout activity_main.xml
                   * */
                EditText etUrl = (EditText) findViewById(R.id.et_url);

                /** Load the url entered in the edittext box */
                mWvUrl.loadUrl(etUrl.getText().toString());

                /** Showing Indeterminate progress bar in the title bar*/
                activity.setProgressBarIndeterminateVisibility(true);

            }
        };

        Button btnLoad = (Button) findViewById(R.id.btn_load);
        btnLoad.setOnClickListener(btnLoadClickListener);

        mWvUrl.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                /** This prevents the loading of pages in system browser */
                return false;
            }

            /** Callback method, executed when the page is completely loaded */
            @Override
            public void onPageFinished(WebView view, String url) {
                 super.onPageFinished(view, url);

                 Toast.makeText(getBaseContext(),
                                "Page loaded Completely",
                                Toast.LENGTH_SHORT).show();

                /** Hiding Indeterminate Progress Bar in the title bar*/
                activity.setProgressBarIndeterminateVisibility(false);

            }

        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}


9. Update the file AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.wptrafficanalyzer.webviewindeterminaterogress"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="4"
        android:targetSdkVersion="15" />

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

    <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>
</manifest>

10. Screenshots of the application in execution

Loading in progress

Figure 5 : URL Loading is in progress

URL loading is completed successfully

Figure 6 : URL loading is completed successfully


11. Download


12. Reference

http://developer.android.com/guide/index.html


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , , , ,

One Response to Showing indeterminate progress bar on title bar while loading URL in WebView

  1. ak on September 2, 2014 at 4:40 am

    Great

Leave a Reply to ak Cancel reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner