Home > Navigation > provide access to general operations for the current screen? > Toolbar

Toolbar

It works like this:

  1. A toolbar can take up to 5 buttons that can perform actions in the current activity. The toolbar can appear everywhere in the screen, where it has a fixed position, by scrolling the toolbar can move out the screen. The buttons in the toolbar contain icons only. On pressing a button in the toolbar, here to share the content displayed above it…

  2. …a dialog pops up with options the user can choose to share from, or cancel by pressing the back-button.

Use when

A toolbar can be applied when you want to give the user an easy way to perform multiple actions in a certain context. Instead of putting the actions in the options menu, you can reserve a horizontal space somewhere in the screen, that fit up to 5 buttons. When you have more options to distribute from the toolbar, make the rightmost button a more-button.

You should not use a toolbar to switch to a different view or mode in the application. For that you should use a tab bar instead.

The Good

  • The user can quickly choose the action he wants to perform

The Bad

  • Because of the fixed position in the page, the toolbar can be scrolled out of the screen, which makes it not visible anymore.

    Examples

    Wapedia

    1 Wapedia home does not show its toolbar when the page is loaded first...

    2 ... Only by scrolling a bit up, the toolbar is visible at the bottom of the page.

    Skyfire Browser

    1 Skyfire Browser has a fixed toolbar under the address bar at the top of the screen.

    2 When scrolling up, the toolbar is not visible anymore.

    Google Places

    1 Google Places shows a toolbar on a detail page of a venue. It is placed in the middle of the screen and contains 4 buttons. The first and third button don

    2 The last button is a more-button. Tapping it...

    3 opens a dialog with more actions that can be performed.

    Leave a comment