https://kotlinlang.org logo
#compose
Title
# compose
s

Sam

03/16/2023, 10:17 PM
use case: i have
Column
content in the foreground that should respect
WindowInsets
but have a background image that should bleed completely full screen
c

Chris Sinco [G]

03/16/2023, 10:44 PM
Assuming this is set in your Activity:
Copy code
WindowCompat.setDecorFitsSystemWindows(window, false)
you will have to handle all the insets. Components like Scaffold in Material3 have insets within it’s content scope, but you still have to pass that as a Modifier or PaddingValue to the child Composable you want to inset.
s

Sam

03/16/2023, 10:50 PM
yes i have
setDecorFitsSystemWindows
and content in the container view is using
.navigationBarsPadding()
but if there is a child view within the
Box
, how do i “break free” from the padding and go edge to edge? apply negative padding?
in
SwiftUI
it’s really easy:
Copy code
ZStack { // equiv to Box
  Image().ignoresSafeArea() // full screen edge to edge
  VStack { // equiv to Column
    // content respecting insets
  }
}
c

Chris Sinco [G]

03/16/2023, 10:56 PM
Not sure we have a convenience method for that - @Alex Vanyo may know more. Otherwise, negative offset is doable, or you apply
navigationBarsPadding
to a sibling of the Image instead of the Box and/or its parents.
s

Sam

03/16/2023, 10:57 PM
does negative padding work in jetpack compose?
c

Chris Sinco [G]

03/16/2023, 10:57 PM
No it will throw a runtime error
s

Sam

03/16/2023, 10:59 PM
i dont see how offset will help in the case of wanting an image edge to edge — unless i specify the height explicitly
c

Chris Sinco [G]

03/16/2023, 11:00 PM
Compose doesn’t clip by default, like in Box, so using the offset modifier will offset the content against the insets/padding. You might just have to scale up the Image a bit to compensate
s

Sam

03/16/2023, 11:07 PM
offset -y would only place the content inside the bleed area on the top, it would not compensate the height so it could also bleed into bottom bar
a

Alex Vanyo

03/16/2023, 11:08 PM
There isn’t a convenience method or modifier like that. There are some tricks that could work, but you’re sort of going against the grain of the layout system by forcing children layouts to be larger than their parents. I’d recommend applying the inset padding (like
navigationBarsPadding()
) further down the hierarchy like Chris mentioned, so the
Image
goes edge-to-edge naturally just by filling the max space in the parent
s

Sam

03/16/2023, 11:12 PM
yep you might be right in most cases, but there are other cases where the component is further down and i need to “break out” of parent system bar padding. i think it might be achievable like so:
Copy code
Box(
  modifier.background(
    Image(modifier.height(fullScreenHeight)
  )
) {
  // regular window inset content goes here
}
a

Alex Vanyo

03/16/2023, 11:31 PM
Could you expand on some of those cases? Window insets padding ideally shouldn’t be too different from other types of padding, and having components “break out” of its parent and the padding in general sounds like a more complex approach than applying the padding further down into the children.
s

Sam

03/16/2023, 11:34 PM
nested navigation with a screen that expands to full screen with a shared component transition
it will start from within a window inset component and will want to retain the insets for all content except its background content you can’t always rely on being able to get your desired full screen content outside of the parent which has the padding applied
this is a pattern we use everywhere on SwiftUI, it’s super common in iOS and built-in because of how frequently it is used that way
this is everywhere we intentionally break out in our
iOS
codebase 😅
i presume if you are an android only developer, then: • you only recently started catering towards edge-to-edge designs • compose wasn’t built with these accommodations as first class (i.e. accompanist addon until recently) then thinking of building this way wouldn’t be second nature like it is for iOS devs
c

Chris Sinco [G]

03/16/2023, 11:47 PM
Well edge-to-edge has been a thing for sometime in Android, even before Compose, it just hasn’t had the broadest adoption like iOS for many reasons. I can’t authoritatively speak to the low-level layout system technical details in Compose, so something @Adam Powell or @romainguy may be able to provide insight on on why this kind of modifier may not be straightforward.
a

Alex Vanyo

03/16/2023, 11:52 PM
Thank you for sharing by the way, that approach is interesting to think about
s

Sam

03/16/2023, 11:56 PM
no prob, thanks for your consideration and advice
33 Views