Mokera

Tech Sheets

mokelab

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:

Back