I am trying to achieve similar effect like the one on the image below:

The screen contains header at the top, LazyColumn inside and a button that is sticky. I've tried to modify the already existing ModalBottomSheet from Material3, so that I can have customisable PartialExpanded percentage instead of the default 50%, but I cannot figure out how to achieve the same effect as on the image.

        Box(modifier = Modifier.fillMaxSize().imePadding().semantics { isTraversalGroup = true }) {
        Scrim(
            color = scrimColor,
            onDismissRequest = animateToDismiss,
            visible = sheetState.targetValue != Hidden,
        )
        ModalBottomSheetContent(
            predictiveBackProgress,
            scope,
            animateToDismiss,
            settleToDismiss,
            modifier,
            sheetState,
            sheetMaxWidth,
            shape,
            containerColor,
            contentColor,
            tonalElevation,
            dragHandle,
            contentWindowInsets,
            content
        )
        StickyContent() // Something like this
    }

Does anyone have some tips on how to achieve this?

I am trying to achieve similar effect like the one on the image below:

The screen contains header at the top, LazyColumn inside and a button that is sticky. I've tried to modify the already existing ModalBottomSheet from Material3, so that I can have customisable PartialExpanded percentage instead of the default 50%, but I cannot figure out how to achieve the same effect as on the image.

        Box(modifier = Modifier.fillMaxSize().imePadding().semantics { isTraversalGroup = true }) {
        Scrim(
            color = scrimColor,
            onDismissRequest = animateToDismiss,
            visible = sheetState.targetValue != Hidden,
        )
        ModalBottomSheetContent(
            predictiveBackProgress,
            scope,
            animateToDismiss,
            settleToDismiss,
            modifier,
            sheetState,
            sheetMaxWidth,
            shape,
            containerColor,
            contentColor,
            tonalElevation,
            dragHandle,
            contentWindowInsets,
            content
        )
        StickyContent() // Something like this
    }

Does anyone have some tips on how to achieve this?

• kotlin
• android-jetpack
• bottom-sheet

• Do you want to achieve initially it should be 50% when user scrolls up list it should be expanded to top? – Santhosh Kumar Commented Jan 20 at 3:09

1 Answer 1

Maybe you should adjust the screen with LocalConfiguration.current.screenHeightDp? You can try something like this:

val sheetState = rememberModalBottomSheetState(
    skipPartiallyExpanded = true
)
val screenHeight = LocalConfiguration.current.screenHeightDp.dp

ModalBottomSheet(
    onDismissRequest = { /*your action*/ },
    sheetState = sheetState,
    tonalElevation = 72.dp,
    dragHandle = {}
) {
    Column(
        modifier = Modifier
            .heightIn(max = screenHeight * 0.93f)
            .fillMaxWidth()
    ) {
      /* your modal content */
    }
}

0.93f - this is the maximum height to which the modal will expand. You can customize it according to your needs