Apps

Show a progress bar in your Android app for a better UX

Users expect mobile apps to be responsive, and when nothing happens, they feel frustrated. Learn how to give users a better experience by adding a progress bar to your Android app.

If your Android app takes too long to respond to a user's action, they will get the Application Not Responding (ANR) error. One easy way to make the user experience (UX) better is to show a progress bar during longer operations.

When and how to use a progress bar

Actions such as loading resources, downloading content, or sending messages can take time. When that action is measurable, you can make the user aware of how far along the operation is in the process.

A moving progress bar also reassures users that the app is still operating properly. Even if the progress bar can't be tied to anything but a timer that updates the bar smoothly, the user will have something to look at while they are waiting.

We'll cover the vertical progress bar here, but there are several styles for the progress bar. For example, the indeterminate state for a progress widget can show that something is still happening.

Sample code

To demonstrate this project, I created a new Android application project in Eclipse and used all the defaults.  I let it create an activity, and modified it as shown below.

First, note that you can easily add a progress bar to a layout. Here is the layout for our activity, adding the progress bar at the bottom.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    <ProgressBar
        android:id="@+id/adprogress_progressBar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent" 
        style="?android:attr/progressBarStyleHorizontal" 
        android:layout_alignParentBottom="true"
        android:layout_margin="10dp"
    />
</RelativeLayout>

We're using the horizontal style, so the progress bar will advance from the left side of the screen to the right.

Now we'd like this progress bar to move, so we'll update the progress bar with a constant timer. As with any sample code, you'll need to add custom logic for your app and more error handling.

package com.example.progressbar;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ProgressBar;
public class MainActivity extends Activity {
    protected static final int TIMER_RUNTIME = 10000; // in ms --> 10s

protected boolean mbActive;
    protected ProgressBar mProgressBar;
    @Override
    public void onCreate(final Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      mProgressBar = (ProgressBar)findViewById(R.id.progressBar);

final Thread timerThread = new Thread() {
          @Override
          public void run() {
              mbActive = true;
              try {
                  int waited = 0;
                  while(mbActive && (waited < TIMER_RUNTIME)) {
                      sleep(200);
                      if(mbActive) {
                          waited += 200;
                          updateProgress(waited);
                      }
                  }
          } catch(InterruptedException e) {
              // do nothing
          } finally {
              onContinue();
          }
        }
     };
     timerThread.start();
   }
   @Override
   public void onDestroy() {
       super.onDestroy();
   }
   public void updateProgress(final int timePassed) {
       if(null != mProgressBar) {
           // Ignore rounding error here
           final int progress = mProgressBar.getMax() * timePassed / TIMER_RUNTIME;
           mProgressBar.setProgress(progress);
       }
   }

public void onContinue() {
     // perform any final actions here
   }
}
We created a thread that continues to update the progress bar with the current progress every 200ms, until it reaches 100% at the total time. See how this looks on an Android 2.3 device (Figure A). Figure A

Now, see the updated style from an Android 4.0 device (Figure B). Figure B

This style is automatically applied based on the version of Android combined with any manufacturer modifications. Unless you need a particular style, it is best to leave it as the default style (or one included in a theme you use) to keep the look and feel consistent on that device.

Conclusion

The progress bar is a simple but effective way to show a user that the app is still working and to keep them engaged. Proper use of a progress bar can also help make an app feel more fluid and responsive, which generally will improve the UX.

About

Tim Mackenzie, author of the Android Income Series books, is a software engineer that escaped the cubicle world at a large company to go solo with Android app development. He uses this freedom to teach others how to make money with Android apps. Visi...

0 comments

Editor's Picks