9

In XML we have material3 bottom sheet. It allows us to set behavior of bottom sheet. It can be updated like:

bottomSheetBehavior.halfExpandedRatio = 0.6
bottomSheetBehavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED

I'm migrating project to Compose. My app used this half expanded ratio for 3 positioned bottom sheet: collapsed, half expanded, expanded. Now i'm trying to create bottom sheet like that:

val sheetState = rememberBottomSheetState(
        initialValue = BottomSheetValue.Collapsed
    )
    val scaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = sheetState
    )
BottomSheetScaffold(
        scaffoldState = scaffoldState,
        sheetContent = {}
) {}

But it looks like we don't have those behavior attributes here. Can we get the same behavior as in XML with half expanded bottom sheet?

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
SoulReaver313
  • 365
  • 1
  • 11
  • Might you can check [ModalBottomSheetState](https://developer.android.com/reference/kotlin/androidx/compose/material/ModalBottomSheetState) with flag `skipHalfExpanded` to achieve – pRaNaY Aug 01 '22 at 09:32
  • Does this answer your question? https://stackoverflow.com/questions/69529798/how-to-expand-bottomsheetscaffold-to-a-specific-height-at-with-jetpack-compose – Code Poet Aug 01 '22 at 09:58
  • 1
    @CodePoet no. I need half-expanded and then expanded states. Not just expanded – SoulReaver313 Aug 01 '22 at 10:06

1 Answers1

1

Yes, it's possible. But it's a little bit of work. You basically have to provide your own implementations of the classes BottomSheetScaffold and SwipeableState as well as any related enums, classes and Composable functions used by these two.

The main points to focus on:

  • provide a third value to BottomSheetValue for the half-expanded state
  • provide a function that animates the half-expansion (similar to functions expand() and collapse() in BottomSheetState) as well as a property that checks if the bottom sheet is half expanded (similar to val isExpanded: Boolean)
  • add a third swipeable anchor to BottomSheetScaffold with the half expansion value you want to achieve (check line fullHeight - peekHeightPx to Collapsed, here is where you want to add your custom anchor)
  • handle the half expanded state in the .semantics block of the Modifier in BottomSheetScaffold

You might need to tweak a few more things depending on your specific requirement. It can take a while to set up everything but once it's done, it works like a charm.

susosaurus
  • 459
  • 10
  • 28