Kotlin with Jetpack Compose -Tabs

Maneesha Erandi
5 min readMay 31, 2023

Using Tabs to navigate between screens allows users to interact with the app in an easy and organized way.

We can create a Tab bar with Jetpack Compose very easily. We can use TabRow and Tab composable to create a tab bar with the custom content we need. Let’s check out these components.

TabRow component with parameters

@Composable
@UiComposable
fun TabRow(
selectedTabIndex: Int,
modifier: Modifier = Modifier,
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
indicator: @Composable @UiComposable
(tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
TabRowDefaults.Indicator(
Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
)
},
divider: @Composable @UiComposable () -> Unit =
@Composable {
TabRowDefaults.Divider()
},
tabs: @Composable @UiComposable () -> Unit
)

We can pass a set of Tabs to the above tabs param.

Tab component with parameters

@Composable
fun Tab(
selected: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
text: @Composable (() -> Unit)? = null,
icon: @Composable (() -> Unit)? =…

--

--