Tabs organize content across different screens, data sets, and interactions. Tabs can be used to switch between views of distinct and related groups of information.
Resources
Type | Link | Status |
---|---|---|
Design | Design source (Figma) | Available |
Implementation | Jetpack Compose | Available |
Highlights
- Tabs can scroll horizontally. A UI can have as many tabs as needed.
- Tabs organize content into categories to help users find different types of information quickly.
- Tabs are displayed next to each other as peers, in categories of equal importance.
Variants
There are two types of tab indicators:
![Tabs Pill](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/tabs/tabs-pill.webp?authuser=4)
![Tabs Underline](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/tabs/tabs-underline.webp?authuser=4)
- Pill indicator
- Bar indicator
Choose the right type according to emphasis. Pill indicator tabs are recommended for organizing full pages. They display the main content destinations. Bar indicator tabs are used within a content area to further separate related content and establish hierarchy.
Anatomy
- Icon (optional)
- Label
- Active indicator
- Pill
- Bar
- Container
States
- Default
- Focused
- Selected
Specs
Behavior
When moving from one tab to the next the content below also slides left or right based on the tab movement.