Kotlin with Jetpack Compose -Tabs
--
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)? = null,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
selectedContentColor: Color = LocalContentColor.current,
unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)
)
We can create a tab bar with built-inTabRow
and Tab
very easily. But if we need to create our own custom tab bar, we can create a fancy tab to display the tab we need.
The same goes with the tab indicator. We can create a custom indicator and pass it to the TabRow.
Let’s create a simple example
Add the libraries to the app levelbuild.gradle
file. These are for the horizontal pager and material icons that not included.
implementation "com.google.accompanist:accompanist-pager:0.25.0"
implementation "com.google.accompanist:accompanist-pager-indicators:0.25.0"
implementation…