Scrollable TabRow Using Jetpack Compose — Material3

Grab a coffee ☕, and let me show you how to use the new Scrollable TabRow from Material3

Dependency

Ensure you have the material3 dependency added to your build.gradle.

dependency {
    implementation("androidx.compose.material3:material3:1.2.1")
}

Implementation

Let’s start by creating the TabItem data class. This will contain the text and the icon.

data class TabItem(
    val selectedIcon: ImageVector,
    val unselectedIcon: ImageVector,
    val text: String
)

Now let’s go in the MainActivity and create a selectedTabIndex . This will be the scrollable tab row state.

var selectedTabIndex by remember {
    mutableIntStateOf(0)
}

These are the tabs.

val tabItems = remember {
    listOf(
        TabItem(
            selectedIcon = Icons.Rounded.Home,
            unselectedIcon = Icons.Outlined.Home,
            text = "Home"
        ),
        TabItem(
            selectedIcon = Icons.Rounded.Favorite,
            unselectedIcon = Icons.Outlined.Favorite,
            text = "Favorites"
        ),
        TabItem(
            selectedIcon = Icons.Rounded.Games,
            unselectedIcon = Icons.Outlined.Games…