Android Progress Bar Example

Leave a Comment / Android Tutorial

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();
    }
}

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.