Can't add padding to top of bottomsheet

[ColtonIdle]

Describe the bug

When using material navigations ModalBottomSheetLayout you can't add padding to just the top of a bottomsheet. When you add padding it pushes all the contents down, which is problematic when you are using a transparent status bar in edge-to-edge mode. There should be a way to ONLY add a padding to bottom sheets and not the entire layout.

@jossiwolf said that this may be a material bug, but I'm posting here just to make sure it's tracked.

[gregkorossy]

This is definitely a material bug as there seems to be no way of setting different padding values for the sheet and the content. This greatly affects the transparent navigation bar too as in landscape the sheet is drawn behind it and if you have rounded corners, they are also going to be behind the navbar. A workaround for now seems to be setting the sheet's background color to transparent and applying a surface to the sheet content directly where you can set the padding any way you want it.

[ColtonIdle]

That's a decent workaround. That way all of my bottom sheets are fully in control of how they draw themselves. I wonder if I lose anything by going that route (i.e. elevation or shows or anything like that)

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[jossiwolf]

Well, apparently my "Waiting on Dependency" stale-label-exclusion rule didn't work 🙈

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[mohammadnr2817]

I recently encountered this issue and a workaround was setting Modifier.fillMaxHeight(fraction = 0.9f) for sheet content, this way isn’t exactly what you wanted(padding) but neither messes with anything like elevations, etc…

[mortenholmgaard]

Any new on this? Is there a material bug this is linked to? Can we get the link here to be able to follow it?

I looked at the code an it could be solved quite easily by exposing a sheetModifier, but the problem is to support that, there is also a minor change in the material library required,

This is the changes required in com.google.accompanist.navigation.material.BottomSheet:

public fun ModalBottomSheetLayout(
    bottomSheetNavigator: BottomSheetNavigator,
    modifier: Modifier = Modifier,
    **sheetModifier: Modifier = Modifier,**
    sheetShape: Shape = MaterialTheme.shapes.large,
    sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
    content: @Composable () -> Unit
) {
    ModalBottomSheetLayout(
        sheetState = bottomSheetNavigator.sheetState,
        sheetContent = bottomSheetNavigator.sheetContent,
        modifier = modifier,
        **sheetModifier = sheetModifier,**
        sheetShape = sheetShape,
        sheetElevation = sheetElevation,
        sheetBackgroundColor = sheetBackgroundColor,
        sheetContentColor = sheetContentColor,
        scrimColor = scrimColor,
        content = content
    )
}

And the changes required in androidx.compose.material.ModalBottomSheet:

fun ModalBottomSheetLayout(
    sheetContent: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    **sheetModifier: Modifier = Modifier,**
    sheetState: ModalBottomSheetState =
        rememberModalBottomSheetState(Hidden),
    sheetGesturesEnabled: Boolean = true,
    sheetShape: Shape = MaterialTheme.shapes.large,
    sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
    content: @Composable () -> Unit
) {
    // b/278692145 Remove this once deprecated methods without density are removed
    val density = LocalDensity.current
    SideEffect {
        sheetState.density = density
    }
    val scope = rememberCoroutineScope()
    val orientation = Orientation.Vertical
    BoxWithConstraints(modifier) {
        val fullHeight = constraints.maxHeight.toFloat()
        Box(Modifier.fillMaxSize()) {
            content()
            Scrim(
                color = scrimColor,
                onDismiss = {
                    if (sheetState.anchoredDraggableState.confirmValueChange(Hidden)) {
                        scope.launch { sheetState.hide() }
                    }
                },
                visible = sheetState.anchoredDraggableState.targetValue != Hidden
            )
        }
        Surface(
            **sheetModifier**
                .align(Alignment.TopCenter) // We offset from the top so we'll center from there
                .widthIn(max = MaxModalBottomSheetWidth)
                .fillMaxWidth()
....

The changes needed are marked with ** as I could not make it bold in a code block.

Edit: I figured out that it is bit more complicated that that, as fullHeight has to be calculated in the scope of Surface/sheetModifier and not using the outer box, as it else will end up with a wrong sheet/scrolling height.