Android - Progress Bar and Customizing Progress Bar

Progress Bar

I am sure most of our application need progress bar (for status like loading, downloading a data, media streaming). Is there any application without a progress bar? I doubt that. Lets explore how to show progress bar in Android.


Cyclic Progress Bar

Below code is for showing a progress bar with cyclic animation


public class CustomprogressbarActivity extends Activity {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

    }

}

Main.xml

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello" />

   

     <ProgressBar        

         android:layout_width="wrap_content"        

         android:layout_height="wrap_content"        

         style="@android:style/Widget.ProgressBar.Small"        

         android:layout_marginRight="5dp" />

</LinearLayout>

Other progress bar styles provided by the system include:

·         Widget.ProgressBar.Horizontal

·         Widget.ProgressBar.Small

·         Widget.ProgressBar.Large

·         Widget.ProgressBar.Inverse

·         Widget.ProgressBar.Small.Inverse

·         Widget.ProgressBar.Large.Inverse

Horizontal Scroll Bar

Next lets see how to show a horizontal scroll bar. In this example we will also see how to update a progress bar from another thread.

In Android, all the views are updated in UI thread. There fore when we try to update an UI (like updating text, progress bar) from another thread, our application will crash.

To avoid this we need to post an handler to UI thread for updating the UI.

package com.example.customprogressbar;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.widget.ProgressBar;

public class CustomprogressbarActivity extends Activity {

    /** Called when the activity is first created. */

                ProgressBar pb;

                private static int x = 0;

                private Handler mHandler;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        mHandler = new Handler();

        pb = (ProgressBar)findViewById(R.id.progress);

                                Thread working = new Thread(new Runnable() {

                                               

                                                @Override

                                                public void run() {

                                                                while(x<=100)

                                                                {

                                                                                try {

                                                                                                Thread.sleep(1000);

                                                                                } catch (InterruptedException e) {

                                                                                                // TODO Auto-generated catch block

                                                                                                e.printStackTrace();

                                                                                }

                                                                x = x+5;

                                                                // Update the progress bar

                mHandler.post(new Runnable() {

                    public void run() {

                        pb.setProgress(x);

                    }

                });

                                                               

                                                }

                                                }

                                });

                               

                                working.start();

    }

}

Main.Xml file for horizontal scrollbar

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello" />

   

     <ProgressBar        

         android:layout_width="wrap_content"        

         android:layout_height="wrap_content"        

         style="@android:style/Widget.ProgressBar.Horizontal"        

         android:layout_marginRight="5dp"

         android:id = "@+id/progress"

         />

</LinearLayout>


We will get below UI :)

Customizing Progress Bar

Our next question will be can I customize the progress bar???? Like changing the background color, fill color???

Ofcourse we can do it :) Below example will help us to do the same,


Create an xml file in drawable folder (/res/drawable), search_progress_drawable.xml.

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">

        <shape>

            <corners android:radius="25dip" />

            <gradient android:startColor="#C0C0C0" android:centerColor="#F8F8FF"

                android:centerY="0.75" android:endColor="#ffffff" android:angle="90" />

            <stroke android:width="1dp" android:color="#6B8E23" />

        </shape>

    </item>

    <item android:id="@android:id/progress">

        <clip>

            <shape>

                <corners android:radius="25dip" />

                <gradient android:startColor="#9ACD32" android:endColor="#FFFF00"

                    android:angle="90" />

                <stroke android:width="1dp" android:color="#d20404" />

            </shape>

        </clip>

    </item>

</layer-list>

Main.xml file

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello" />

   

     <ProgressBar        

         android:layout_width="200dp"        

         android:layout_height="wrap_content"         

         style="@android:style/Widget.ProgressBar.Horizontal"        

         android:layout_marginRight="5dp"

         android:progressDrawable="@drawable/search_progress_drawable"

         android:id = "@+id/progress"

         />

</LinearLayout>




Wow look what an beautiful progress Bar :)

Now we all can show progress Bar in our Android application :) Learning is FUN :)