Friday 7 November 2014

HB Blog 34: Circular Progress Bar In Android.

A progress bar is a visual indicator of progress in some operation. Normally, we find linear horizontal line representing the progress bar. but,we can also have circular progress bar to show progress of specific task. There are many ways to do so, I have shown one of them.
Have a look on few code snippets,

MainActivity.java
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
//This methods is used to handle progress of progressbar.
public void callAsynchronousTask() {
    final Handler handler = new Handler();
    Timer timer = new Timer();
    TimerTask doAsynchronousTask = new TimerTask() {      
        @Override
        public void run() {
            handler.post(new Runnable() {
                public void run() {      
                    try {
                        progressBar.incrementProgressBy(1);
                        int stringProgress=progressBar.getProgress();
                        progressText.setText(stringProgress+"");
                    } catch (Exception e) {
                    }
                }
            });
        }
    };
    timer.schedule(doAsynchronousTask, 0, 10);
}

activity_main.xml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<ProgressBar
        android:id="@+id/ProgressBar01"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="150dp"
        android:layout_height="173dp"
        android:layout_centerInParent="true"
        android:indeterminate="false"
        android:max="48"
        android:progress="50"
        android:progressDrawable="@drawable/progressbar" />

    <TextView
        android:id="@+id/progressText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="100"
        android:textSize="50sp"
        android:textColor="#3BB9FF" />

progressbar.xml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
//This is drawable file for progressbar bar. Put this file in drawable folder.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/progress">
    <shape
             android:innerRadiusRatio="3"
             android:shape="ring"
             android:thicknessRatio="7.0">
  <gradient
             android:startColor="#FF9933"
             android:endColor="#138808"
             android:centerColor="#ffffff"
             android:type="sweep" />  
</shape>
</item>
</layer-list> 


Refer the below link for complete sample code:-
Download Sample Code
Download Apk File

No comments:

Post a Comment