Kotlin with Jetpack Compose — Appbar

Photo by Stephen Frank on Unsplash

If you are a beginner to Jetpack Compose and interested in learning Kotlin, this article will be a guide for you.

Appbar is an essential UI component in mobile app development. It will display details and actions relevant to the current screen. In Jetpack compose we have a TopAppBar component to create a simple Material appbar.

You can see the TopAppBar component with the params that we can use from below.

public fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier,
    navigationIcon: @Composable() (() -> Unit)?,
    actions: @Composable() (RowScope.() -> Unit),
    backgroundColor: Color,
    contentColor: Color,
    elevation: Dp
): Unit

Params

title — The title to be displayed in the center of the TopAppBar
modifier — The Modifier to be applied to this TopAppBar
navigationIcon — The navigation icon displayed at the start of the TopAppBar. This should typically be an IconButton or IconToggleButton.
actions — The actions displayed at the end of the TopAppBar. This should typically be IconButtons. The default layout here is a Row, so icons inside will be placed horizontally.
backgroundColor — The background color for the TopAppBar. Use Color.Transparent to have no color.
contentColor — The preferred content color provided by this TopAppBar to its children…