Relays information to the user in a transitory fashion, typically to confirm a user action or to alert the user to a system event. See the Coding guide for details on how to implement a status bar. Sometimes status bars are referred to as "banners."
Characteristics
- Examples include deleting multiple photos in Gallery, or deleting or moving multiple emails.
- Positioned at the bottom of the screen, covering underlying content.
- Closing: Status bars automatically disappear, typically after a few seconds for short messages. This can be longer, though, depending on the message and context.
- Can include an input, such as an "Undo" option; this is optional.
- Can optionally include an image.
- Can either be part of an app (such as a "Photos deleted" banner in the Gallery app) or in the System (such as a "Low battery" alert).
- Avoid displaying more than one status bar at the same time. If two status bars appear at the same time, the newer status bar replaces the older one.
Visuals
Text is always centered on the status bar. In general, it's recommended that you avoid having more than two lines of text in your status bar. Although the text should always be white, you can use blue to highlight information of importance.
The height of the status bar is variable depending on the amount of text it contains.
Alarm
Here's a banner announcing that the user has successfully set an alarm. Note the use of blue to indicate the important details. |
Email selection
Note here that the status bar is displayed above the toolbar at the bottom of the screen. |
Variations
Status with only a title
|
Status with title and image
|
Status with title and input
|
Interactions
This diagram shows how the status bar should work.
