I have a bottom sheet. When collapsed the padding on top of the text is perfect (according to my des...

# compose

[Colton Idle]

I have a bottom sheet. When collapsed the padding on top of the text is perfect (according to my designer), but when it's fully expanded, we want to add extra padding so that the text is pushed down. We want the bottom sheet to go all the way up because that's what our designer wants in our edge to edge application.

sheet_before.mp4

[Colton Idle]

This is my code in the video above

Column(
    verticalArrangement = <http://Arrangement.Top|Arrangement.Top>,
    modifier = Modifier.fillMaxSize().padding(horizontal = 16.dp),
) {
    Text(
        "My Bottom Sheet",
        color = Color(0xFF073042),
        style = MaterialTheme.typography.h2,
        modifier =
            Modifier.align(Alignment.CenterHorizontally)
                .padding(vertical = 16.dp)
    )

[Colton Idle]

I updated it to this

Column(
    verticalArrangement = <http://Arrangement.Top|Arrangement.Top>,
    modifier = Modifier.fillMaxSize().padding(horizontal = 16.dp),
) {
    val contentPadding =
        rememberInsetsPaddingValues(
            insets = LocalWindowInsets.current.systemBars,
            applyTop = true,
            applyBottom = true,
        )
    val padding by animateDpAsState(
        if (bottomSheetNavigator.navigatorSheetState.offset.value < 120F) {
            contentPadding.calculateTopPadding()
        } else {
            0.dp
        })
    Text(
        "My Bottom Sheet",
        color = Color(0xFF073042),
        style = MaterialTheme.typography.h2,
        modifier =
            Modifier.align(Alignment.CenterHorizontally)
                .padding(vertical = 16.dp)
                .padding(top = padding)
    )

but I'm mostly just guessing at some values here and it looks... "okay" according to my designer, but she is asking if I can smoothe it out.

Anyone have suggestions?

[Colton Idle]

Here is the video of the code above.

I think my main issue is that I randomly use the offset value < 120F to determine "show extra padding or not" but I want the padding to grow slowly as the user scrolls the bottom sheet up, and the padding should shrink when the bottom sheet is going from expanded to collapsed state.

sheet_after.mp4

[ms]

if I'm not wrong, BottomSheetState exposes progress of the animation which you can use

[Colton Idle]

Hm. A progress percentage would be helpful I think because I think I want to map my additionalPadding to a ratio of the progress percent.

example:
progress: 0% == extraPadding =0.dp
progress: 50% == extraPadding =12.dp
progress: 100% == extraPadding =24.dp
and all of the percentages in between.

@jossiwolf sorry for the ping, but is this possible with bottomSheetNavigator?

[jossiwolf]

@Colton Idle We currently don't expose the progress (this is the crux of not being able to expose the sheet state directly) but happy to add that 🙂

[Colton Idle]

@jossiwolf I will file a feature request (unless you currently think that I can derive it from something).

[Colton Idle]

Filed: https://github.com/google/accompanist/issues/673

[jossiwolf]

Thanks! You can't derive it from anything currently, sorry about that!

[Colton Idle]

I was able to "sort of" derive it myself. Basically, I try to guess at roughly what the open height is and calculate that as being ~0% open, and when I drag up towards the screen height then my derived state moves up towards 100% and calculates the additional padding with that percentage.

Before:

before1.mp4

[Colton Idle]

After:

after.mp4

[Colton Idle]

Here's the code if anyone is curious

bottomSheet(route = "sheet") {
    //Need this to find the height of the screen
    BoxWithConstraints(Modifier.fillMaxHeight()) {
        // Get status bar height
        val statusBarHeight = rememberInsetsPaddingValues(
            LocalWindowInsets.current.statusBars,
            applyTop = true
        )

        val boxWithConstraintsScope = this

        //Top padding of the bottom sheet is dynamic and is derived from:
        val padding =
            derivedStateOf {
                val percentageOpen =
                    (((bottomSheetNavigator.navigatorSheetState.offset.value) / (boxWithConstraintsScope.maxHeight.value / 0.8)) - 1.0).absoluteValue

                statusBarHeight.calculateTopPadding().value.times(
                    percentageOpen
                )
            }
        Text(
            modifier = Modifier
                .padding(vertical = padding.value.dp)
                .background(Color.Magenta),
            text = "We did it!",
            style = MaterialTheme.typography.h5
        )

    }
}

Doing math with dp's seems a little weird and error prone potentially? Not sure if I'm using the right conversions (maybe @Doris Liu can take a look), but it seems to work pretty much as I want it. The only "magic" value is the 0.8 (which I hope I could actually get the height of the half-expanded bottom sheet (even with a BoxWithConstraints) but a bottom sheet seems to always report it's total expanded height.