https://kotlinlang.org logo
#compose
Title
# compose
p

Piotr Prus

02/15/2021, 11:57 AM
I am trying to use
BottomSheetScaffold
and encountered one problem. I do not know how to open the bottomSheet to certain value. Example: 1. The view shows the list 2. User clicks the element in list 3. BottomSheet opens to certain height 4. User drags the sheet up 5. Sheet reveals to full screen I tried to use BottomSheetScaffoldState.bottomSheetState.expand { }, but this function always open the sheet to full height. I was searching for something like:
BottomSheetScaffoldState.bottomSheetState.expandByHalf()
or
BottomSheetScaffoldState.bottomSheetState.setAnchor(200.dp)
or similar to this, but no luck. Anyone knows how to make a mid step for BottomSheet?
j

jossiwolf

02/15/2021, 1:18 PM
That's not supported by
BottomSheetScaffold
. There's
ModalBottomSheet
which has a
HalfExpand
state if the content is taller than 50% of the root element, so maybe that's what you're looking for?
p

Piotr Prus

02/15/2021, 1:37 PM
Thanks for info. I saw how ModalBottomSheet is working. I am looking for something that will result in GoogleMaps behavior of bottomSheet. I guess this is a custom behavior with dynamic peekHeight or something.
j

jossiwolf

02/15/2021, 2:02 PM
Makes sense! I don't think there's anything like that rn (except for setting the height of the sheet content manually, but that sucks) Would be worth filing a feature request unless somebody knows anything!
👍 1
p

Piotr Prus

02/15/2021, 2:11 PM
I made a POC with dynamic peekHeight, bu then the slide down gesture is not working. 😞. I will try to hack the modalSheet
j

julioromano

03/18/2021, 10:49 AM
@Piotr Prus I’m facing the same issue, did you manage to solve it?
p

Piotr Prus

03/18/2021, 11:04 AM
Yes. I am using dynamic peekHeight. Here is my column code (inside bottomSheet):
Copy code
Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(MaterialTheme.colors.primary)
            .verticalScroll(rememberScrollState())
            .pointerInput(Unit) {
                detectVerticalDragGestures(
                    onVerticalDrag = { change, dragAmount ->
                        if (dragAmount > 1f) onDragDown()
                    })
            }
    )
in
onDragDown()
I am calling:
Copy code
changePeekHeight(0.dp)
Important thing to notice is that
.pointerInput
needs to be after
Modifier.verticalScroll
. If not, all the drag will be consumed by the scroll
j

julioromano

03/18/2021, 3:26 PM
Is
changePeekHeight()
a Compose API ?
p

Piotr Prus

03/18/2021, 3:34 PM
no, it is my own function in viewmodel that changes the peekHeight. In Scaffold:
Copy code
sheetPeekHeight = mapsViewState?.peekHeight ?: 0.dp,
in VM:
Copy code
fun changePeekHeight(height: Dp) {
        mapsViewState.peekHeight = height
    }
🙌 1
s

Saurabh Khare

04/28/2022, 3:20 AM
@Piotr Prus are you find the solution for BottomSheetState.expandByHalf(), I am also struggling with same. If you have sample code please share.
p

Piotr Prus

04/28/2022, 6:25 AM
I do not have more than this. I build my own BottomSheet implementation that can be open at any height. That includes a lot of code. I do not have it on public repo 😞 . Maybe one day, but not now. Sorry. Whan you need to do is make your own BottomSheetScaffold, copy the state functions, enums, etc and add your custom height to it.
2 Views