ProgressBar in Android – Implementation and Overview

ProgressBar in Android – Android Studio

ProgressBar is a integral part of every application. By using a ProgressBar you are letting the user know about how much time a process is going to take. This adds additional level of UI discipline to convey a progress to the user. We will see about how a ProgressBar can be implemented.

There are primarily to types of ProgressBars in Android. They are

  • Determinate ProgressBar – When you know how long a process is going to take, we can set the values to this progress bar and let the user know about it.
  • Indeterminate ProgressBar – If there is no information about how long a process might take, or a dynamic change in the progress time, we can use this progressbar to let the User know about it. It will just set a circle spinning continuously (Can be annoying sometimes though!!)

Indeterminate ProgressBar – XML definition

We can create the indeterminate progress bar using the tag, <ProgressBar> like below

<ProgressBar
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" />

The default attributes are layout_height and layout_width as always.

Determinate ProgressBar – XML definition

The progressbar tag is the same, however we make use of another attribute to set the style like below.

style="@android:style/Widget.ProgressBar.Horizontal"

We can then make changes to it, by calling the method setProgress(int) or incrementProgressBy(int) to update the progress.

The complete definition is as below

<ProgressBar
    android:id="@+id/progress"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:progress="40"/>

The progress value set, will give a animated value like below

ProgressBar - Determinate
ProgressBar – Determinate

The style attribute is responsible for giving the shape and color fill to the bar.

ProgressBar – Attributes

Some of the important attributes associated with Progress bars are:

  • android:indeterminate – This takes a boolean value, when set will enable the indeterminate behaviour of the progress bar.
  • android:max – This sets the maximum value for the progress bar. By default it is at 100, and any value set is calculated with 100 as the max. If changed, the animation changes based on the maximum value.
  • android:progress – This determines the default progress value to the bar from 0 to max
  • android:indeterminateBehavior – This lets the progress bar know what the behaviour should be after it reaches the max value.
  • android:indeterminateTintMode – Applies a Tint mode to the indicator color of the circle looping. This can be changed through the activity also.
  • android:progressBackgroundTint – This gives the background color to the progress bar (The remaining portion when the progress is not shown)
  • android:progressTint – This applies the color to the progress bar which shows the increments.
  • android:min – The minimum value of the progress bar. By default it is at 0.
  • android:indeterminateDuration – This is kind of an ambiguous attribute. The indeterminate duration is set to timeout the spinning circle which is denoting the progress! But indeterminate progress bar’s mostly will not have this attribute set, since it lets the user know that they have to wait.

ProgressBar – Activity Implementation

We will implement all the attributes and create a sample progress bar in Android Studio.

Determinate Progress Bar example –

progress_bar.xml

<ProgressBar
    android:id="@+id/progress"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:progress="40"
    android:progressBackgroundTint="#888"
    android:progressTint="#9ff"/>

We can now set the progress at regular intervals using our activity like below.

ProgressBarActivity.java
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ProgressBar;

public class ProgressBarActivity extends AppCompatActivity{
    ProgressBar pb;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.progress_bar);
         pb = (ProgressBar) findViewById(R.id.progress);

        //Setting a initial progress of 0
        pb.setProgress(0);

        //Create a new thread to start updating the progress
        //WE do this inorder to not block the main thread
        Thread thread = new Thread(new Runnable(){
            @Override
            public void run() {
                for(int i =0;i<10;i++)
                {    //We will set the progress every 1 second
                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    pb.setProgress(10*i);

                }
            }
        });
        thread.start();
    }
}

In real projects, the progress may come from any server response, and we can update the value accordingly.

The resulting application is:
Progressbar
Progressbar – Determinate
Indeterminate ProgressBar Example

progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminateTint="#888"
        android:layout_gravity="center"
        />
</LinearLayout>

On running this and generating the application i get

Progressbar - Indeterminate
Progressbar – Indeterminate

Conclusion – Material Design Ideas

You can make use of the Material design theme inspired from here. You can implement custom progress bar’s with different shapes.

Keep in mind the following before deciding about the progress bar.

  • Decide what the purpose of the progress bar is, will it be a determinate or a indeterminate bar
  • Do not over use the indeterminate spinner progress bar. It can annoy the users
  • Make sure you set the progress to the determinate bar wisely, user do not want to wait for extra seconds even after the bar has gotten full
  • A simple wireframe diagram to know about the flow of activities can be really helpful
  • Learn to create custom progress bar’s as it can separate you from the general themed ones.

Drop in any comments you have below. Check other related topic like rating bar here.

“Learn and Be Curious”

Leave a Comment