ZOFTINO.COM

Android ProgressBar and Custom ProgressBar Examples

Android ProgressBar is used to show progress of an operation to users. There are two types of progress bars and for each type android provides material styles.

If total duration it takes to complete an operation is known, the progress bar which is used to show progress of such operation is called determinate progress bar or horizontal progress bar.

If total duration it takes to complete an operation is unknown, the progress bar which is used to show progress of such operation is called indeterminate progress bar or circular progress bar.

In this post, you can find details on progress bar attributes, updating progress bar, progress bar material styles, custom material style, custom progress bar, custom horizontal progress bar, and custom circular or indeterminate progress bar.

Adding Android ProgressBar

To use progress bar, add ProgressBar element to layout xml as shown below. Attribute progress needs to be assigned some value to view progress bar. Details about progress bar attribute will be covered in the following sections.

To define indeterminate ProgressBar (circular progress bar), either set indeterminate attribute to true or use android non horizontal progress bar style. To define determinate ProgressBar (horizontal progress bar), do reverse.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ProgressBar
        android:id="@+id/progressBar3"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:progress="25"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progressBar4"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:progress="25"
        app:layout_constraintTop_toBottomOf="@+id/progressBar3" />
</android.support.constraint.ConstraintLayout>
android progressbar determinate and inderminate example

Android ProgressBar Attributes

Some of the important progress bar attributes are described below.

  • progress : is used to set progress value, your program needs to periodically update the progress so that progress bar reflects the progress of the operation it represents.
  • indeterminate : is used to indicate type of progress bar, value true means indeterminate progress.
  • indeterminateDrawable : is used to set drawable for indeterminate progress bar.
  • indeterminateDuration : is used to set animation duration for indeterminate progress bar.
  • indeterminateTint : is used to set tint of indeterminate progress bar progress indicator.
  • progressBackgroundTint : is used to set progress indicator background
  • progressTint : is used to set tint of progress indicator.
  • progressDrawable : is used to set determinate progress bar drawable.
  • min : is used to define minimum value.
  • max : is used to define maximum value.

Android ProgressBar Updating Progress

As the purpose of the progress bar is to show the progress of an operation in your application, your program needs to update the progress bar with progress as it is available or periodically.

Below code shows how to update progress bar with progress, it uses RxJava observable which emits integers with 5 seconds delay. This code needs to be added to a method which handles the operation start event.

    progressBar = (ProgressBar) findViewById(R.id.progressBar4);  

    Observable.range(1, 200).subscribeOn(Schedulers.computation())
            .delay(5, TimeUnit.SECONDS)
                .observeOn(AndroidSchedulers.mainThread())
            .subscribe(new Consumer<Integer>() {
        @Override
        public void accept(Integer progress) throws Exception {
            progressBar.setProgress(progress);
        }
    }, new Consumer<Throwable>() {
        @Override
        public void accept(Throwable throwable) throws Exception {

        }
    });

Android ProgressBar Material Style Application Level

Above screen shot shows progress bar when one of the material styles is applied to application. You can change progress bar color by setting colorAccent to the desired color as shown below and use it as application theme.

<style name="AppThemeMyLight" parent="Theme.AppCompat.Light">
    <item name="colorAccent">#0091ea</item>
</style> 
android progressbar custom material theme

Android ProgressBar Material Styles

Android platform provides several material styles such as Widget.Material.ProgressBar.Horizontal, Widget.Material.ProgressBar, etc, but using app compact material styles provide backward compatibility. App compact material styles are Widget.AppCompat.ProgressBar.Horizontal and Widget.AppCompat.ProgressBar for indeterminate and determinate progress bar respectively.

Custom progress bar style

To set the ProgressBar background color, you can use progressBackgroundTint or colorControlNormal attributes. To set ProgressBar color, you can use progressTint or colorControlActivated. If you use colorControlNormal and colorControlActivated, apply the style to progress bar using theme attribute.

<style name="MyProgressBar" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
    <item name="android:progressBackgroundTint">#69f0ae</item>
    <item name="android:progressTint">#b71c1c</item>
    <item name="android:minWidth">200dp</item>
</style>
 

Applying custom style to ProgressBar element

<ProgressBar
    android:id="@+id/progressBar5"
    ...
    style="@style/MyProgressBar"/>
 

Custom progress bar output

android progressbar custom material theme example

Similarly, you can customize theme for indeterminate progress bar as shown below.

<style name="MyProgressBarCircular" parent="@style/Widget.AppCompat.ProgressBar">
    <item name="android:indeterminateTint">#b71c1c</item>
</style>
 

Android ProgressBar Secondary Progress

To show secondary progress, first define color for secondary progress by setting secondaryProgressTint attribute to the desired color.

<item name="android:secondaryProgressTint">#ff6d00</item>
 

Then update secondaryProgress with secondary progress value like as shown below.

progressBar = (ProgressBar) findViewById(R.id.progressBar4);
progressBar.setSecondaryProgress(50);
 
android progressbar secondary progress example

Android Horizontal ProgressBar Custom Drawable

You can define a drawable as xml resource and use it as custom drawable for horizontal or determinate progress bar.

Custom drawable for horizontal progress bar

Below layer list drawable is an example of custom drawable for horizontal progress bar. The layer list drawable defines three layers. First item is for background, second layer is for secondary progress and third layer is for progress. You need to make sure that android defined ids are used for each item in layer list.

Our example drawable xml for custom horizontal progress bar also uses standard color attributes such as colorControlNormal, colorControlActivated, and colorControlHighlight to set colors of progress bar background, progress, and secondary progress respectively so that color of our custom horizontal progress bar can be customized easily.

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
            android:tint="?attr/colorControlNormal">
            <corners android:radius="8dp"/>
            <size android:height="20dp" />
            <solid android:color="#90caf9" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle"
                android:tint="?attr/colorControlHighlight">
                <corners android:radius="8dp"/>
                <size android:height="20dp" />
                <solid android:color="#90caf9" />
            </shape>
        </scale>
    </item>
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle"
                android:tint="?attr/colorControlActivated">
                <corners android:radius="8dp"/>
                <size android:height="20dp" />
                <solid android:color="#b9f6ca" />
            </shape>
        </scale>
    </item>
</layer-list>
 

Custom style for horizontal or determinate progress bar

<style name="MyProgressBarTwo" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
    <item name="colorButtonNormal">#f50057</item>
    <item name="colorControlActivated">#33691e</item>
    <item name="colorControlHighlight">#ff6d00</item>
    <item name="android:progressDrawable">@drawable/custom_progressbar_horizontal</item>
    <item name="android:minWidth">200dp</item>
</style>
 

Applying custom style and theme to ProgressBar element

 <ProgressBar
    android:id="@+id/progressBar5"
    . . .
    style="@style/MyProgressBarTwo"
    android:theme="@style/MyProgressBarTwo"
    android:progress="30"
    android:secondaryProgress="60"/> 

Custom horizontal progress bar output

android custom horizontal progressbar progress example

Android Custom Circular or Indeterminate ProgressBar

Circular or indeterminate progress bar can be customized by providing custom drawable. You can define custom drawable as xml resource using layer list, shape and rotate. Our example drawable for indeterminate progress bar defines two rectangles and rotates them.

Custom drawable for indeterminate progress bar

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress"
        android:top="16dp"
        android:bottom="16dp">
        <layer-list>
            <item>
                <rotate
                    android:fromDegrees="45"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="315">
                    <shape android:shape="rectangle">
                        <size
                            android:width="80dp"
                            android:height="80dp" />
                        <stroke
                            android:width="6dp"
                            android:color="#b71c1c" />
                    </shape>
                </rotate>
            </item>
            <item>
                <rotate
                    android:fromDegrees="90"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="270">
                    <shape android:shape="rectangle">
                        <size
                            android:width="80dp"
                            android:height="80dp" />
                        <stroke
                            android:width="6dp"
                            android:color="#1a237e" />
                    </shape>
                </rotate>
            </item>
        </layer-list>
    </item>
</layer-list>
 

Custom style uses custom drawable for indeterminate progress bar

 <style name="MyProgressBarRectangle" parent="@style/Widget.AppCompat.ProgressBar">
    <item name="android:indeterminateDrawable">@drawable/android_progressbar_oval</item>
    <item name="android:minHeight">80dp</item>
    <item name="android:minWidth">200dp</item>
</style>

Applying custom indeterminate progress bar style

 <ProgressBar
    android:id="@+id/progressBar"
    . . .
    style="@style/MyProgressBarRectangle"/> 

Custom indeterminate progress bar output

android custom circular or inderminate progressbar example