Jérémie Laval Jérémie Laval February 26, 2013 ,

The artwork and underlying idea in this blog post is based on Romain Nurik‘s work. He is a great source to follow for insight into Android application design.

The new GMail app that comes with Android 4.0 is full of interesting UI tricks. If you have ever been on dodgy data connection, you probably have already encountered this one that I call the flash bar:


There is a little text block for it at the bottom of the Confirming & Acknowledging Android design page. This bar is used to warn of a non-fatal error in an unobstrusive manner and offer a quick way to retry the operation that failed. If the user doesn’t actually care about it, the bar will disappear after a small amount of time.

For these cases, it efficiently replaces a normal AlertDialog—which is much more costly in term of user interaction. As such, it’s an excellent pattern to handle things like the kind of simple network errors that happen often and are generally non-lethal.

As you can see in the screenshot, flash bars are very similar to normal Toast messages. The problem with toast messages is that they can never gain focus. Consequently, toast notifications can’t use any interactive UI elements (like buttons). That’s why the bar needs to be a custom XML layout snippet.

First of all, download the following zip containing the 9-patch images and the style definition for the flashbar. Put its content in your application’s Resources directory (merging the styles.xml file with what you already have).

Next, you will need to tune up a bit the XML layout of the Activity that will contain a flash bar. Essentially, it should look like this:

The overlay trick is achieved by using multiple children in a container FrameLayout that stacks them from bottom to top on the screen. If you have an existing layout where you want to add a flash bar, the first child LinearLayout can be the one that was enclosing your layout initially.

Now, the code manipulating that bar follows:

You generally instantiate this class after inflating your Activity layout by passing it the LinearLayout of the flash bar as a View, like so:

Afterwards, you can use either ShowBar or ShowBarUntil to display the flash bar. Each of these methods accepts a boolean parameter to disable animation. You can set the text of the bar either by string id or directly by passing a string instance. The callback is the action to be called when the user tap the bar button.

Here are two examples using the above methods: