Files
AndroidJetpack/Jetpack-Compose-Playground/docs/material/topappbar.md
T
2026-07-15 16:57:36 +08:00

1.1 KiB

TopAppBar

A TopAppBar displays information and actions relating to the current screen and is placed at the top of the screen.

@Composable
fun TopAppBarSample(){
    Column {
        TopAppBar(
            elevation = 4.dp,
            title = {
                Text("I'm a TopAppBar")
            },
            backgroundColor =  MaterialTheme.colors.primarySurface,
            navigationIcon = {
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.ArrowBack, null)
                }
            }, actions = {
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.Share, null)
                }
                IconButton(onClick = {/* Do Something*/ }) {
                    Icon(Icons.Filled.Settings, null)
                }
            })

        Text("Hello World")

    }
}

See also:

  • [Full Example Code]({{ site.samplefolder }}/material/appbar/topappbar/TopAppBarSample.kt)