Hello! I have a case which I can’t fix for days no...
# compose
n
Hello! I have a case which I can’t fix for days now and need help. I need my bottom sheet to apply a fullscreen scrim(red color for the sake of example) however, it cuts off from top as I use
statusBarsPadding
in the host view. How do I have intrinsic padding that wouldn’t affect dimming? Is it possible at all? Thanks!
s
Did you look internally in the function you're calling where this padding is coming from? Is this m3, m2, or something else? Does that component perhaps accept a
WindowInsets
parameter which defaults to having
WindowInsets.statusBars
for example?
n
This is M2
ModalBottomSheetLayout
. M2 component unfortunately does not accept
WindowInsets
as a parameter 😕
the white area uses
statusBarsPadding
so it blocks bottom sheet scrimming completely. I also tried M3 bottom sheet but it works as expected. However, I can’t use M3 at the moment
s
Hmm actually I don't see anything being applied to this by default https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]terial/ModalBottomSheet.kt;l=357-368?q=ModalBottomSheetLayout Are you using this exact function or something else?
n
yes using this. However, the issue is with the host view. Bottom sheet opens on top of the host view. The host view uses
statusBarsPadding
and it affects the bounds of bottom sheet as it seems. To visualize
Copy code
ModalBottomSheetLayout(
    sheetContent = {},
    scrimColor = Color.Red,
    content = {
        Box(Modifier.statusBarsPadding()) -> this does affect the bounds
    }
)
s
So it looks like to me you want to have the content go properly edge to edge and your problem would be solved. Instead of
Copy code
Box(Modifier.statusBarsPadding()) {
 ScreenContent()
}
Do:
Copy code
Column() {
 Box(Modifier.statusBarsPadding())
 ScreenContent()
}
And adjust accordingly then
n
No doesn’t work 😕 scrim start where the
statusBarsPadding
ends (top white area) or scrim can’t apply to top component which is drag handle? but if so how 🤔my content structure is like
Copy code
Column {
    DragHandle() -> applies statusBarsPadding
    Content()
}
s
What's the entire thing looking like? Are you sure there's no padding added from somewhere else in your app?
If you remove
DragHandle()
does it render all the way to the top as you'd like it to?
n
Sorry for the belated reply, I think I will use M3 BottomSheet to tackle this issue. Thanks for the help 🙏
👍 1