Tabs in Jetpack Compose

In this blog, we will explore how to use tabs in jetpack compose !!

TABS in Jetpack Compose

Step: 1

Create Tabs File

sealed class Tabs(val tabName:String, val selected:Boolean)
{
    object Tab1 :Tabs("Tab One", false)
    object Tab2 :Tabs("Tab Two Week", false)
}

Step: 2

Provide the list of titles for the tabs in Tab Row and tell which tab should be selected by default. use Tab component for Each Tabs

TabRow(selectedTabIndex = selectedTab, modifier = Modifier.padding(top = 5.dp)) {
    tabItems.forEachIndexed { index, it ->
        Tab(selected = selectedTab == index, onClick = { selectedTab = index }, text = {
            Text(text = it.tabName)
        }, selectedContentColor = Yellow, unselectedContentColor = White850)
    }
}

Note: Mutable state is used to save the current tab/selected tab, forEach Loop is used to iterate over the list of the tabs.

Step: 3

Inflating the tabs

when (selectedTab) {
    0 -> Box(selectedtab) // Your component 
    1 -> Box(selectedtab) // Your component
}

That's it, enjoy Tabs in jetpack compose…😊

Complete Code :

val tabItems = listOf(Tabs.Tab1, Tabs.Tab2)
var selectedTab by remember {  mutableStateOf(0) }
TabRow(selectedTabIndex = selectedTab, modifier = Modifier.padding(top = 5.dp)) {
    tabItems.forEachIndexed { index, it ->
        Tab(selected = selectedTab == index, onClick = { selectedTab = index }, text = {
            Text(text = it.tabName)
        }, selectedContentColor = Yellow, unselectedContentColor = White850)
    }
}
when (selectedTab) {
    0 -> Box(selectedtab) // Your component
        1 -> Box(selectedtab) // Your component
}