Tabs

Tabs are used as a navigational widget that let the user switch among sets of views. This way, a window may contain multiple views. See the Coding guide for details on how to implement tabs in your apps.

Characteristics

  • Tab bars always fill the full horizontal width of the screen.
  • You may have up to (but no more than) five tabs in a tab bar.
  • Tab bars should be positioned at the very bottom of the screen, unless doing so would result in excessive clutter due to multiple bars of controls at the bottom of the screen.
  • Tabs can contain a variety of elements, such as buttons, filters, indicators, and the like.
  • Tabs' labels may be text, text with an icon, or just an icon.

Visuals

Below is a screen shot showing a fairly complicated screen; the tab bar is at the bottom, providing the primary interface for selecting views. At the top, just below the "Call Log" header, is a filter bar, letting the user switch between all calls and missed calls. These are both kinds of tab bars.

Tab states

Each tab has four possible states:

Normal
This is how the tab normally appears when not the active tab.
Pressed
When the user is holding a finger down on the tab, it's in the "pressed" state.
Active
The currently active tab—the one whose corresponding view is displayed—is in the "active" state.
Disabled
When a tab is disabled, it cannot be selected; its icon should be drawn with a grey cast.
Normal Pressed Active Disabled

See also

Attachments

File Size Date Attached by
tab: screenshot
52951 bytes 2013-02-24 14:06:48 Sheppy
tabs: active
2290 bytes 2013-02-24 14:15:36 Sheppy
tabs: disabled
2124 bytes 2013-02-24 14:15:43 Sheppy
tabs: pressed
2472 bytes 2013-02-24 14:15:56 Sheppy
tabs: normal
4126 bytes 2013-02-24 14:16:39 Sheppy

Document Tags and Contributors

Contributors to this page: Sheppy, chrisdavidmills
Last updated by: chrisdavidmills,