Hello people, I have one layout which consumes the...

# compose

[Davide Giuseppe Farella]

Hello people, I have one layout which consumes the status bar insets; this layout may or may not have a sibling placed above, which also consumes the same inserts insets.
Since they’re siblings, what is the right way to have the insets consumed only by the first one, instead of both?
Example in the screen. Now I set the statusBarPadding to the yellow box, but on the top bar, thus if the yellow box got removed, the top bar will be drawn behind the status bar

[Alex Vanyo]

There’s a few ways to do this, which depend on the behavior you’re going for.

The simplest would probably be to just apply the status bar padding conditionally to the yellow box or the top bar, based on whether the yellow box is visible or not.

If you’re going for some sort of animation when the yellow bar appears and disappears, that might get a bit more complicated to get the desired effect

[Davide Giuseppe Farella]

The 2 layouts are Composable lambas passed to a third layout, let's call it C for simplicity.
C doesn't know then if we have the yellow box or not, unless we measure them with a SubComposeLayout, which I don't want to.
The quickest hack I found is something like this

fun C(
  yellowBox: @Composable () -> Unit,
  topBar: @Composable () -> Unit
) {
  val statusBarHeight = Insets...
  Column {
    Box(Modifier.heigthIn(min = statusBarHeight) {
      yellowBox()
    }
    topBar()
  }
}

What do you think about it?

[Alex Vanyo]

Maybe it would be possible to pass yellowBox as
yellowBox: (@Composable () -> Unit)?

And the null would indicate that there is no yellowBox, so you could change your inset application appropriately

[Davide Giuseppe Farella]

Nice, usually I try to forget about null, but this could be a good time to use it .
Thank you 🙂