Tabs

  • Tabs are interactive buttons displayed in groups, with only one active at a time, unlike independent buttons.

  • They can be integrated into app bars with different alignment options or presented as standalone bars, adapting to various screen sizes.

  • Tab styling incorporates specific typography, color palettes for different states and elements, and standardized sizing for icons and touch targets.

  • Visual examples demonstrate tab implementations, including collapsed, app bar-nested, and standalone configurations.

Tabs are buttons that always occur in groups and are dependent on each other’s state: only one can be active at any given time.

callout icon
Buttons component
Buttons that are not tabs can operate independently of other buttons

Anatomy

1. Active tab icon
2. Inactive tab icon
3. Active tab label
4. Inactive tab label

Specs

Tabs nested in app bar – left aligned

callout icon
Layout labels
Definitions of E, M, KL, P, Flex
callout icon
App bar & header component
Specs, style guidelines, and more

Tabs nested in app bar – flexible alignment

With flexible alignment, the tab configuration stretches or compresses to fit the available space.

Tabs collapsed in app bar – drawer menu

callout icon
App bar & header component
Specs, style guidelines, and more

Standalone tab bar – left aligned

Standalone tab bar – flexible alignment

With flexible alignment, the tab configuration stretches or compresses to fit the available space.

Tab label string overflow

Scaling layouts

These reference layouts show how to adapt tabs to accommodate screens of various widths and heights. (Width and height categories are defined in the Layout section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs.

callout icon
Layout
Margins, keylines, and padding for various screen sizes
callout icon
Layout labels
Definitions of E, M, KL, P, Flex

Standard vs. wide screens in short height bracket

Standard vs. wide screens in standard height bracket

Standard vs. wide screens in tall height bracket

Extra-wide and super-wide screens in all height brackets

Styles

callout icon
Typography guidelines
Scale and grid references, typographic examples, and more
callout icon
Color guidelines
Palettes, elevation and opacity values, and more

Typography

Type style Typeface Weight Size (dp)
Body 3 M Roboto Medium 24
Body 3 Roboto Regular 24

Color

Element Color(day mode) Color (night mode)
Primary type / icons White White @ 88%
Secondary type / icons White @ 72% White @ 60%
Tab bar background Black Black
Tab bar background on scroll Black @ 84% Black @ 88%
Tab icon - active state White White @ 88%
Tab icon - inactive state White @ 56% White @ 50%

Sizing

Element Size (dp)
Primary icon 44
Secondary icon 36
Icon touch target 76

Examples

Tabs collapsed
Tabs nested in app bar
Standalone tab bar