Add topBar to Scaffold in Jetpack Compose
Last updated:2024-07-10
To add a top bar to Scaffold
in Jetpack Compose, add the topBar
parameter.We used to call it ActionBar
or Toolbar
.In Material Design, it's called App bars.
@Composable
fun MyApp() {
ComposeAppTheme {
Scaffold(
// pass topBar
topBar = { MyTopAppBar() }
) {
MainScreen()
}
}
}
@Composable
fun MyTopAppBar() {
TopAppBar(
title = {
Text(text = stringResource(id = R.string.app_name))
},
)
}
See other page to customize TopBar
. The preview will look like this: