Tabs
Stay organized with collections
Save and categorize content based on your preferences.
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
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:
- 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.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2024-08-19 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-08-19 UTC."],[],[],null,["# Tabs organize content across different screens, data sets, and\ninteractions. Tabs can be used to switch between views of distinct and\nrelated groups of information.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#TabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function2,kotlin.Function1)) | Available |\n\nHighlights\n----------\n\n- Tabs can scroll horizontally. A UI can have as many tabs as needed.\n- Tabs organize content into categories to help users find different types of information quickly.\n- Tabs are displayed next to each other as peers, in categories of equal importance.\n\nVariants\n--------\n\nThere are two types of tab indicators: \n\n1. Pill indicator\n2. Bar indicator\n\nChoose the right type according to emphasis. Pill indicator tabs are\nrecommended for organizing full pages. They display the main content\ndestinations. Bar indicator tabs are used within a content area to further\nseparate related content and establish hierarchy.\n\nAnatomy\n-------\n\n1. Icon (optional)\n2. Label\n3. Active indicator\n 1. Pill\n 2. Bar\n4. Container\n\nStates\n------\n\n1. Default\n2. Focused\n3. Selected\n\nSpecs\n-----\n\nBehavior\n--------\n\nWhen moving from one tab to the next the content below also slides left or\nright based on the tab movement."]]
