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. Progress Bar Style.

There are several styles that you can apply to a progress bar.

  1. Widget.ProgressBar.Horizontal
  2. Widget.ProgressBar.Large
  3. Widget.ProgressBar.Small
  4. Widget.ProgressBar.Inverse
  5. Widget.ProgressBar.Large.Inverse
  6. Widget.ProgressBar.Small.Inverse

To apply style, you can use below xml settings.

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

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

  1. progressBarStyle
  2. progressBarStyleHorizontal
  3. progressBarStyleLarge
  4. progressBarStyleSmall
  5. progressBarStyleInverse
  6. progressBarStyleLargeInverse
  7. progressBarStyleSmallInverse
  8. progressBarStyleSmallTitle
<ProgressBar
    android:id="@+id/progressBar2"
    style="?android:attr/progressBarStyleHorizontal"

3. Common Horizontal Progress Bar Example.

android common horizontal progress bar exanple

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.

android custom horizontal progress bar example

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

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

custom progress bar xml files

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.

android common circle progress bar exanple

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.

This example will use a rotate image instead of the default rotate circle.

READ :   Android Count Down Timer Example

android custome circle progress bar exanple

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

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

custom progress bar styles xml file

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>

For the first item value in above code, add app / res / drawable / my_progress_bar_circle.xml file.

custom progress bar xml files

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.

android custome animation progress bar exanple

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

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

custom progress bar xml files

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

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 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 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 message to 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();
    }
}
(Visited 6,657 times, 1 visits today)

Leave a Reply

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.