Notifications — Part 2 : Progress Indicator

Notifications are a very important and powerful tool. Use them correctly — you can significantly increase user engagement. Use them poorly- you might even risk it with users uninstalling your app…

As the Android N release has some new notification features in store, and a new elegant facelift, it is a perfect opportunity to review all that Android allows us to do with notifications, and improve the user experience and engagement.

Previous post explored some styling options we can easily implement to attract users into our app.

This post will discuss another use for the notifications: indicating progress.

When uploading, downloading, syncing, or doing any other time consuming work, this is a great way to let the users know our app is doing something for them — without interfering the user workflow.

When the work finishes, notify the users by updating the notification.

Good for UX, easy to implement — as WIN WIN as it gets :)

What does it look like?

Intermediate progress indicator:

(on Android N, M, K:)

Fixed progress indicator:

(on Android N, M, K:)

As from Ice Cream Sandwich release, we can simply use Notification.Builder.setProgress() to add the indicator to the view.

For previous versions, you must create your own custom notification layout that includes a ProgressBar view. We’ll talk about custom notifications on the next post.

How does it work?

setProgress() takes 3 arguments:

setProgress(int maxValue, int progress, boolean indeterminate);

maxValue — maximum value to set for the progress.

progress — current progress value.

indeterminate —

• If set to “false” : the indicator colors progress / maxValue of the indicator line.

• If set to “true” : the first 2 values are ignored, and the progress indicator would go from start to end continuously (demonstrated on the GIFs above).

When progress is finished,

use builder.setProgress(0, 0, false), to indicate that there’s no progress to show and the progress bar will disappear.

This is a good opportunity to let the users know we finished, by setting the content text.

For example:

builder.setProgress(0, 0, false)
       .setContentText("Download complete");

Just show me!

We’ll get into more details on the NotificationManager, and updating a notification in a future post. But here is an example to make it work:

Indeterminate progress indicator:

final NotificationCompat.Builder builder = getSimpleBuilder();

builder.setProgress(0, 0, true);
manager.notify(NOTIF_ID, builder.build());

doHardWork();

builder.setContentText("Download complete")
       .setProgress(0, 0, false);                              
                       
manager.notify(NOTIF_ID, builder.build());

Fixed-duration progress indicator:

final NotificationCompat.Builder builder = getSimpleBuilder();
int incr;

for (incr = 0; incr <= 100; incr += 10) {
    
    builder.setProgress(100, incr, false);                                      
    manager.notify(NOTIF_ID,builder.build());

   do10percentOfHardWork();
}

builder.setContentText("Download complete")
       .setProgress(0, 0, false);

manager.notify(NOTIF_ID, builder.build());

Make sure NOTIF_ID is constant, so the current notification is updated, instead of creating a new one.

Well,

That’s how easy and useful it is to add a progress indicator on notifications.

Still there’s so much more ways we can and should use to customize our notifications, for better UX!

Next post will discuss custom view notifications. Keep posted :)