Material 3 Tabs in Jetpack Compose

Get started with Material 3 tabs in Jetpack Compose to create user-friendly interfaces for switching between related content.

Explore Tabs Style

Learn to implement a Material 3 primary tabs layout for switching between content.

Primary Tabs

Shows a horizontal bar for switching between content.

@Composable
fun PrimaryTabsExample(modifier: Modifier = Modifier) {
    // Creates a horizontal tab bar for navigation
    val destinations = remember {
        listOf("Songs", "Albums", "Playlists")
    }
    var selectedDestination by remember { mutableIntStateOf(0) } // Tracks selected tab
    PrimaryTabRow(
        selectedTabIndex = selectedDestination, // Highlights selected tab
        modifier = modifier.padding(8.dp) // Customizes tab layout
    ) {
        destinations.forEachIndexed { index, label ->
            Tab(
                selected = selectedDestination == index, // Indicates selection state
                onClick = { selectedDestination = index }, // *Required: Handles tab click
                text = {
                    Text(
                        text = label, // *Required: Sets tab label
                        maxLines = 2, // Limits text lines
                        overflow = TextOverflow.Ellipsis // Handles long text
                    )
                }
            )
        }
    }
}
  

Use Primary Tabs when you want to switch between related content.

Examples:

• Switch between categories in a music app
• Navigate between sections in a news app
• Access different views in a social media app

---

Tabs Properties

Understand the key properties used in the tabs example.

Property	Usage
onClick*	Required: Handles click events for each tab
text*	Required: Displays text for each tab
content*	Required: Defines tabs using Tab composable
selected	Highlights the currently selected tab
modifier	Customizes the tab row layout, like padding
maxLines	Limits the number of text lines in a tab (e.g., 2)
overflow	Handles long text in tabs (e.g., TextOverflow.Ellipsis)