Fixed tabs
The width of each tab can be calculated by taking the width of the view and dividing it by the number of tabs. Alternatively, make all tabs the width of the largest tab.
If the margin between the tab edge and view edge is 16dp or less, use full-width tabs instead of centered tabs.
Width minimum and maximum (inclusive of padding)
- Maximum: 264dp
- Minimum: 160dp for larger views, 72 dp for smaller views
Height
- 48dp
Padding
- 12dp left and right of text
- 20dp from bottom for a single line of text, 12dp from bottom for two lines of text
Alignment
- Full-width for smaller views
- Centered for larger views
Indicator
- Height: 2dp
- Color: #fff or accent color
Fixed tabs on mobile, text only, portrait orientation
Mobile portrait example of fixed tabs, text only
Tabs with text only
Text
- 14sp Roboto Medium
- 12sp when wrapped across a maximum of two lines
- All caps
- Horizontally and vertically centered
- Active color: #fff or accent color
- Unfocused tab color: #fff 70%
Mobile landscape example of same tabs aligned with left keyline
Mobile landscape example of same tabs centered
Tabs with icons and text
Height
- 72dp
Icon
- 24 x 24dp
Content alignment
- Text and icon are centered horizontally in the tab
Padding
- 10dp between icon and text
- 16dp under text
Fixed tabs on mobile, icons and text
Fixed tabs on mobile, icons and text
Tabs with icons only
Height
- 48dp
Icon
- 24 x 24dp
Content alignment
- Icon is centered horizontally and vertically in the tab
Padding
- 12dp under icon
Fixed tabs on mobile, icons only
Fixed tabs on mobile, icons only
Scrollable tabs
The left-most tab content aligns with the keyline. Alignment varies between landscape and portrait to match the different keylines.
The width of each tab is independently calculated.
Width minimum and maximum (inclusive of padding)
- Maximum (whichever fits and is smaller): 264dp or (the value of view size minus 56dp)
- Minimum: 160dp for larger views, 72 dp for smaller views
Height
- 48dp
Padding
- 12dp left and right of text
- 20dp from bottom for a single line of text, 12dp from bottom for two lines of text
Indicator
- Height: 2dp
- Color: #fff or accent color
Scrollable tab
Extremely long tab labels, as shown here, should be avoided. This max-width scrollable tab contains wrapped text.
Text
- 14sp Roboto Medium
- 12sp when wrapped across a maximum of 2 lines
- All caps
- Vertically and horizontally centered
- Active color: #fff or accent color
- Unfocused tab color: #fff 70%
Extremely long tab labels, as shown here, should be avoided. These max-width tabs, depicted in landscape mode on mobile, are aligned with the left keyline.
Desktop
Width minimum and maximum (inclusive of padding)
- Maximum (whichever fits and is smaller): 264dp or (the value of view size minus 56dp)
- Minimum: 160dp for larger views, 72 dp for smaller views
Height
- 48dp
Alignment
- Centered or aligned with left keyline
Text
- 13sp Roboto Medium
- All caps
- Horizontally and vertically centered
- Wraps across a maximum of two lines
- Active color: #fff or accent color
- Unfocused tab color: #fff 70%
Padding
- 24dp left and right of text
- 20dp from bottom for a single line of text, 12dp from bottom for two lines of text
- First tab text left padding: 80dp
Indicator
- Height: 2dp
- Color: #fff or accent color
Desktop tabs
Tab touch target animation
Note: Implementations of this component may vary by platform. By using standard platform implementations, you will receive related future improvements.
Animation of tab touch target.