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.

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

Layout labels

Definitions of E, M, KL, P, Flex

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

App bar & header component

Specs, style guidelines, and more

Standalone tab bar – left aligned

Standalone tab bar – flexible alignment

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.

Layout

Margins, keylines, and padding for various screen sizes

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

Typography guidelines

Scale and grid references, typographic examples, and more

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