I have a Scaffold with a TopAppBar. How do you make the bar's background color go all the way to top...

# compose

[robnik]

I have a Scaffold with a TopAppBar. How do you make the bar's background color go all the way to top edge of screen?

[Bryan Herbst]

You need to use the usual mechanisms to allow your app to draw edge-to-edge, then you will want to use something like Accompanist to use the window insets in Compose.

Both steps are documented here: https://google.github.io/accompanist/insets/

[robnik]

Okay, thanks. I'm still new enough to Android that I don't know what the usual mechanisms are, but I can probably find them.

[JulianK]

I think you'll need this (using accompanist insets):

setContent {
    WindowCompat.setDecorFitsSystemWindows(window, false)
    ProvideWindowInsets {

[Bryan Herbst]

You can't either use this part of Accompanist: https://google.github.io/accompanist/systemuicontroller

Or set the system bars to transparent in your theme

[robnik]

I've almost got it. Now the scaffold TopAppBar appears under the system bar icons. If I add a Modifier.systemBarsPadding() to it, then it moves back down, but the system bar is then white.

[Bryan Herbst]

Can you share your Composable that has the systemBarsPadding()? I’m guessing you are applying a background Modifier after the padding. If you apply a background before the padding then the padding will have the right background color

[robnik]

It's the top bar in a Scaffold. The code:

Scaffold(topBar = {
    TopAppBar(modifier = Modifier.systemBarsPadding(),
        title = { },
        navigationIcon = { BackButton() { nav.navigateUp() } },
        actions = {            
            IconButton( { add() }) { Icon(Icons.Default.Add, "Add") }
            IconButton( { edit() }) { Icon(Icons.Default.Edit, "Edit") }            
    )
}) {
    LazyColumn() {
        items(vm.workouts) { workout ->
            ...
        }
    }
}

[Bryan Herbst]

Yeah, you probably want to throw a background() modifier before systemBarsPadding(), otherwise you are adding transparent padding so you’ll see the color of the Scaffold

[robnik]

Ah okay. I have no mental model for modifier order yet. I don't mind the white status bar; at least I got rid of the clashing purple color. But here's what it looks like now. I'm not sure what that shadow line is under the status bar and above my "top bar".

[Bryan Herbst]

Looks like you have a translucent status bar scrim- I’d recommend reading through this: https://medium.com/androiddevelopers/gesture-navigation-going-edge-to-edge-812f62e4e83e

[robnik]

Thanks!