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.