androidandroid-jetpack-composebottom-sheetjetpack-compose-modalbottomsheet

Is it possible to create a "tri-state" bottom sheet in Jetpack Compose?


I've tried looking around everywhere through documentation, videos, and Stack Overflow questions but haven't found exactly what I'm looking for.

What I'm wanting is a Modal style bottom sheet that opens to a half expanded sheet. If the bottom sheet is swiped up, it fully expands the bottom sheet. If swiped down from half expanded it should collapse and just peek above the bottom of the screen. If swiped down from peek/collapsed state, it should close or hide the bottom sheet altogether.

Every bottom sheet from Compose that I've tried and seen only allows fully expanded, partially expanded, or hidden, but not also a peek. Or if it has a peek state, it cannot be swiped to dismiss.

BottomSheetScaffold appears to be a no-go, because I need to access and interact with content behind this Compose layout so the scaffold cannot be blocking (in this case) the map underneath the layout, unless there's a way to indicate/allow the scaffolding to pass clicks through to the underlying content.

I have seen the behavior in some XML bottomSheets with STATE_COLLAPSED, STATE_HALF_EXPANDED, STATE_EXPANDED, etc. and I partially wonder if it would be easier to just slap an XML bottom sheet in an AndroidView that then takes composable content, though I'd like to avoid this if I can.

Any advice or help is appreciated.


Solution

  • Use draggestures to detect the offset and change its height according. Bottom sheet won't allow us to set tri open states