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
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
Tabs collapsed in app bar – drawer menu
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.
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
