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
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-anatomy-1.png?authuser=9)
2. Inactive tab icon
3. Active tab label
4. Inactive tab label
Specs
Tabs nested in app bar – left aligned
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-1.png?authuser=9)
Tabs nested in app bar – flexible alignment
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-3.png?authuser=9)
Tabs collapsed in app bar – drawer menu
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-4.png?authuser=9)
Standalone tab bar – left aligned
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-6.png?authuser=9)
Standalone tab bar – flexible alignment
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-5.png?authuser=9)
Tab label string overflow
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-2.png?authuser=9)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-1.png?authuser=9)
Standard vs. wide screens in standard height bracket
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-2.png?authuser=9)
Standard vs. wide screens in tall height bracket
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-3.png?authuser=9)
Extra-wide and super-wide screens in all height brackets
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-4.png?authuser=9)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-1.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-3.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-2.png?authuser=9)