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

Answer 2

You can use the TopAppBar.

The best way is to use the Scaffold. Something like:

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "TopAppBar")
                },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Filled.Menu,"")
                    }
                },
                backgroundColor = ....,
                contentColor = ....
            )
        }, content = {
            
        })

Answer 3

Re-usable custom toolbar jetpack composed

@Composable fun CustomToolbarScreen(navController: NavHostController, title: String, isBack: Boolean){
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
var isDrawerOpen = remember {
    mutableStateOf(false)
}
TopAppBar(
    colors = TopAppBarDefaults.smallTopAppBarColors(
        containerColor = MaterialTheme.colorScheme.primaryContainer,
        titleContentColor = MaterialTheme.colorScheme.primary,
    ),
    title = {
        Text(text = title,color = Color.Black,
            fontSize = 18.sp)
    },
    modifier = Modifier.background(colorPrimary),
    navigationIcon = {
        if (isBack){
            IconButton(onClick = {navController.navigateUp()}) {
                Icon(Icons.Filled.ArrowBack, "backIcon")
            }
        }else{
            IconButton(onClick = {
                scope.launch {
                    scaffoldState.drawerState.open()
                    Log.i("Drawer", "drawer Open: ")
                }
            }) {
                Icon(Icons.Filled.Menu, "backIcon")
            }
        }
    }
)}

More details please visit this link custom toolbar