Fixed and scrollable tab rows
Tabs organize content across parallel sections of a screen. A fixed TabRow splits the available width evenly, while a ScrollableTabRow keeps each tab at its natural width and scrolls horizontally when they overflow.
Three evenly spaced tabs with content below.
var selected by remember { mutableIntStateOf(0) }
val titles = listOf("Overview", "Specs", "Reviews")
TabRow(selectedTabIndex = selected) {
titles.forEachIndexed { index, title ->
Tab(
selected = selected == index,
onClick = { selected = index },
text = { Text(title) }
)
}
}
Text("Showing: ${titles[selected]}")Many tabs scroll horizontally rather than compressing.
var selected by remember { mutableIntStateOf(0) }
val titles = listOf("Daily", "Weekly", "Monthly", "Quarterly", "Yearly")
ScrollableTabRow(selectedTabIndex = selected) {
titles.forEachIndexed { index, title ->
Tab(
selected = selected == index,
onClick = { selected = index },
text = { Text(title) }
)
}
}
Text("Showing: ${titles[selected]}")