Android Progress Bar Example

android.widget.ProgressBar is a sub-class of android.view.View. It is the parent class of both AbsSeekBar, RatingBar, SeekBar and ContentLoadingProgressBar. This article will introduce ProgressBar properties and how to customize ProgressBar for your needs.

1. Android ProgressBar Properties.

1. progress: An int value to indicate the progress bar current progress.
2. secondaryProgress: An int value to indicate the progress bar current secondary progress.
3. indeterminate: A boolean value. true show a circle bar. false show a horizontal bar. But commonly the bar is decided by it’s style value.

2. How To Set Progress Bar Style.

1. There are several styles that you can apply to a progress bar.
2. Widget.ProgressBar.Horizontal
3. Widget.ProgressBar.Large
4. Widget.ProgressBar.Small
5. Widget.ProgressBar.Inverse
6. Widget.ProgressBar.Large.Inverse
7. Widget.ProgressBar.Small.Inverse
8. To apply style, you can use below xml settings.

   <ProgressBar
       android:id="@+id/progressBar3"
       style="@android:style/Widget.ProgressBar.Large.Inverse"

9. You can also use android system attr to set progress bar style.

   <ProgressBar
       android:id="@+id/progressBar2"
       style="?android:attr/progressBarStyleHorizontal"

10. progressBarStyle
11. progressBarStyleHorizontal
12. progressBarStyleLarge
13. progressBarStyleSmall
14. progressBarStyleInverse
15. progressBarStyleLargeInverse
16. progressBarStyleSmallInverse
17. progressBarStyleSmallTitle

3. Common Horizontal Progress Bar Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/ESxiJmp1iGI

1. app / res / layout / activity_progress_bar.xml

   <!-- Settings for common horizontal progress bar.-->
   <TextView
       android:id="@+id/textView13"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Common Horizontal Progress Bar"
       android:textSize="20dp"/>
   
   <ProgressBar
       android:id="@+id/progressBar1"
       style="@android:style/Widget.ProgressBar.Horizontal"
       android:max="100"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

4. Customize Horizontal Progress Bar Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/iFBWc7N6wrU

1. app / res / layout / activity_progress_bar.xml

   <!-- Settings for custom horizontal progress bar background, progress and secondProgress.-->
   <TextView
       android:id="@+id/textView14"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Custom Horizontal Progress Bar"
       android:textSize="20dp"
       android:layout_marginTop="20dp"/>
   
   <ProgressBar
       android:id="@+id/progressBar2"
       style="?android:attr/progressBarStyleHorizontal"
       android:max="100"
       android:minHeight="100dp"
       android:padding="6dp"
       android:progressDrawable="@drawable/my_progress_bar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

2. Please note android:progressDrawable‘s value in the above code. You need to add drawable file app/res/drawable/my_progress_bar.xml
3. app / res / drawable / my_progress_bar.xml

   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   
       <item android:id="@android:id/background" android:drawable="@color/colorRed"/>
   
       <item android:id="@android:id/progress">
           <clip>
               <color android:color="@color/colorGreen" />
           </clip>
       </item>
   
       <item android:id="@android:id/secondaryProgress">
           <clip>
               <color android:color="@color/colorBlue" />
           </clip>
       </item>
   
   </layer-list>

5. Common Circle Progress Bar Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/UUxnaUgbpMA

1. app / res / layout / activity_progress_bar.xml

   <!-- Settings for common circle progress bar.-->
   <TextView
       android:id="@+id/textView15"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Common Circle Progress Bar"
       android:textSize="20dp"
       android:layout_marginTop="20dp" />
   
   <ProgressBar
       android:id="@+id/progressBar3"
       style="@android:style/Widget.ProgressBar.Large.Inverse"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

6. Custom Circle Progress Bar Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/_sYewfBPtTo

1. This example will use a rotate image instead of the default rotating circle.
2. app / res / layout / activity_progress_bar.xml

   <!-- Settings for customize circle progress bar.-->
   <TextView
       android:id="@+id/textView16"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Custom Circle Progress Bar"
       android:textSize="20dp"
       android:layout_marginTop="200dp" />
   
   <ProgressBar
       android:id="@+id/progressBar4"
       style="@style/my_progress_bar_circle"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

3. Please note the above code style attribute value. You need to add a style in app / res / values / styles.xml file. The style name is my_progress_bar_circle. Then apply that style in the above XML code.
4. app / res / values / styles.xml

   <style name="my_progress_bar_circle">
       <item name="android:indeterminateDrawable">@drawable/my_progress_bar_circle</item>
       <item name="android:minWidth">30dp</item>
       <item name="android:minHeight">30dp</item>
       <item name="android:maxWidth">1000dp</item>
       <item name="android:maxHeight">1000dp</item>
   </style>

5. For the first item value in the above code, we need to create the app/res/drawable/my_progress_bar_circle.xml file.
6. app / res / drawable / my_progress_bar_circle.xml

   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
       android:drawable="@drawable/img2"
       android:fromDegrees="0"
       android:pivotX="50%"
       android:pivotY="50%"
       android:toDegrees="360" >
   </rotate>

7. Custom Progress Bar With Animation Image Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/UXZDHKcfdOw

1. app / res / layout / activity_progress_bar.xml

   <!-- Settings for customize animation progress bar.-->
   <TextView
       android:id="@+id/textView17"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Custom Animation Progress Bar"
       android:textSize="20dp"
       android:layout_marginTop="200dp" />
   
   <ProgressBar
       android:id="@+id/progressBar5"
       android:indeterminateDrawable="@drawable/my_progress_bar_animation"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:minHeight="300dp"/>

2. Add app / res / drawable / my_progress_bar_animation.xml file for above code android:indeterminateDrawable property value.
3. app / res / drawable / my_progress_bar_animation.xml

   <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android">
       　　<item android:duration="1000" android:drawable="@drawable/img1" />
       　　<item android:duration="1000" android:drawable="@drawable/img2" />
       　　<item android:duration="1000" android:drawable="@drawable/img3" />
       　　<item android:duration="1000" android:drawable="@drawable/img4" />
       　　<item android:duration="1000" android:drawable="@drawable/img5" />
       　　<item android:duration="1000" android:drawable="@drawable/img6" />
   </animation-list>

8. ProgressBarActivity.java

1. ProgressBarActivity.java

   package com.dev2qa.example;
   
   import android.os.Bundle;
   import android.os.Handler;
   import android.os.Message;
   import android.support.v7.app.AppCompatActivity;
   import android.widget.ProgressBar;
   
   import static com.dev2qa.example.R.id.progressBar1;
   import static com.dev2qa.example.R.id.progressBar2;
   
   public class ProgressBarActivity extends AppCompatActivity {
   
       // Indicate message sender thread.
       private int UPDATE_PROGRESS_THREAD = 1;
   
       // Progress bar int value.
       private int progressBarStatus = 0;
   
       // Handler in the main thread.
       private Handler mainThreadHandler;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_progress_bar);
   
           setTitle("dev2qa.com - Progress Bar Example");
   
           // Get common progress bar.
           final ProgressBar progressBarCommon = (ProgressBar)findViewById(progressBar1);
   
           // Get customize horizontal progress bar.
           final ProgressBar progressBarCustomHorizontal = (ProgressBar)findViewById(progressBar2);
   
           mainThreadHandler = new Handler()
           {
               @Override
               public void handleMessage(Message msg) {
                   // if the message sent from worker thread. Then update progress bar progress and secondary progress value.
                   if(msg.what == UPDATE_PROGRESS_THREAD)
                   {
                       int secondProgressStatus = progressBarStatus - 15;
   
                       progressBarCommon.setProgress(progressBarStatus);
                       progressBarCommon.setSecondaryProgress(secondProgressStatus);
   
                       progressBarCustomHorizontal.setProgress(progressBarStatus);
                       progressBarCustomHorizontal.setSecondaryProgress(secondProgressStatus);
                   }
               }
           };
   
           // This is the worker thread that will change the progress status value every 1 second.
           Thread workerThread = new Thread()
           {
               @Override
               public void run() {
                   try {
                       while(true) {
                           if(progressBarStatus > 100)
                           {
                               progressBarStatus = 0;
                           }
                           // Increase current progress value.
                           progressBarStatus += 10;
   
                           // Send a message to the main thread message queue.
                           Message msg = new Message();
                           msg.what = UPDATE_PROGRESS_THREAD;
                           mainThreadHandler.sendMessage(msg);
   
                           // Child thread sleep 1 second.
                           Thread.sleep(1000);
                       }
                   }catch (Exception ex)
                   {
                       ex.printStackTrace();
                   }
               }
           };
           workerThread.start();
       }
   }