Kotlin with Jetpack Compose — Appbar

Maneesha Erandi
2 min readApr 19
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. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this TopAppBar.
elevation — the elevation of this TopAppBar.

Simple demo

This is a simple demo that I have created to show the implementation of Appbar. We can pass the TopAppBar component to the topBar parameter of the Scaffold component. Then we have to pass the necessary values for the available params to create our top app bar.

I have used title, navigationIcon, backgroundColor and contentColor in the below example. Most of the time we will need actions param as well.

    Scaffold(
topBar = {
TopAppBar(
title = {
Text(text = "My App")
},
navigationIcon = {
IconButton(onClick = { /* Handle navigation icon clicked */ }) {
Icon(Icons.Filled.Menu, contentDescription = "Navigation menu")
}
},
backgroundColor = LightGreen, // color from Color.kt
contentColor = Color.White
)
}
) {

This is the app screen of my demo.

You can find the full code from here with the necessary imports.

Thank you for reading!!!

Maneesha Erandi

I write about mobile development and wildlife.