How can i add a Toolbar in Jetpack Compose?

Question

I need to add a Toolbar in my Android application with a List like below. I am using Jetpack Compose to create the UI. Below is the composable function i am using for drawing the main view.

@Composable
fun HomeScreenApp() {
    showPetsList(dogs = dogData)
}

Answer 1

In Jetpack compose Toolbar can be easily implemented by using a Composable function called TopAppBar. You need to place TopAppBar along with your main composable function inside a column.

@Composable
fun HomeScreenApp() {
    Column() {
        TopAppBar(title = { Text(text = "Adopt Me") }, backgroundColor = Color.Red)
        showPetsList(dogs = dogData)
    }
}

The above function calls the TopAppBar inside a column followed by your main content view. The TopAppBar function takes in a Text object(Not string) as title. This can also be any Composable function. You can also specify other params like backgroundColor, navigationIcon, contentColor etc. Remember that TopAppBar is just a Composable provided by Jetpack team. It can be your custom function also just in case you need more customization.

Output