Tabs

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.


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

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

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.

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

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