Toolbars contain actions, indicators, and navigation elements associated with the current view. These may include things such as buttons to delete the currently selected items, a filter to enter edit mode, or a filter to show only "favorite" contacts. See the Coding guide for details on how to implement toolbars in your apps.
Characteristics
- Toolbars are always the full width of the screen, and are always the same height.
- Toolbars never scroll with content; instead, they float above content.
- Toolbars should always be positioned at the very bottom edge of the screen unless tabs are also present, in which case the toolbar is positioned at the top of the screen instead.
- Toolbars may contain a wide variety of elements, including buttons, filters, progress/activity indicators, and so forth.
Visuals
A toolbar is presented as a row of icons or text labels across the screen:
| Normal | Pressed |
|---|---|
 |
 |
Below are some sample user interfaces that make use of toolbars.
| Email inbox | Drawer toolbar |
|---|---|
|
A toolbar displayed while in edit mode in an email inbox. The toolbar includes icons for deleting the currently selected messages, marking messages, sending messages, and moving messages. |
The bottom of this drawer presents a toolbar; this one has just one icon, to open the app's settings panel. This is a way to provide access to settings and other screens from a drawer that's used for organizational presentation of user content. |
