A modern programming language that makes developers happier.

kotlinlang

BottomSheet.zip

issue_with_anchored_draggable.mov

Hi I am trying to use `anchoredDraggable` but sometimes while trying to change the state of sheet while flinging, sheet drops the gesture and goes back to initial state. This only happen when I try to add the `anchoredDraggable` to `ComposeView` which is present in xml layout

I have attached the video of UI where in the first iteration I show complete UI in compose where this issue is not happening and in the second I show the UI using `ComposeView` in added xml view where this issue is happening.

is there any workaround or parameter that I am missing? `BottomSheet.zip` contains the code of the project

Raised the issue at <https://issuetracker.google.com/issues/404994444>
Hoping it would be triaged :crossed_fingers:

bottom sheets give me soooo many issues.

Try bottom sheets from <@UPKV9E17S>
<https://composeunstyled.com/>

they just work. and when sometimes theres a missing api alex has a fix in like a day. :muscle:

In this case, I was trying anchoredDraggable to implement bottom sheet. Given anchoredDraggable is new api it should not have any legacy issues :sweat_smile: 

i agree. but all of the bottom sheet stuff had great progress for a few months, and then it fell off in priority it seems

<@U01PTS8847P> The unstyled library is there so you don't need to implement bottom sheets and other standard patterns from scratch (they are unstyled).

However, if you found an issue with anchored draggable that will be present in unstyled too – that's what I use under the hood too

Thanks for the update, I will try you lib and see if that has that issue or not. Meanwhile I created an <https://issuetracker.google.com/issues/404994444|issue> with sample project and video in the issue tracker

cool. ill +1. file as many bugs as you can!

Hi <@UPKV9E17S> in you bottom sheet implementation can we have mutliple states of the bottom sheet? And if yes then in those states can we have wrap content in each state for the UI?

<@U01PTS8847P> yup. Those are called Detents. You can configure them according to the container the sheet is in (ie the screen) or the size of the sheet itself.

Here is one for 'peeking' 60% of the content's height

```val Peek = SheetDetent(identifier = "peek") { containerHeight, sheetHeight -&gt;
    containerHeight * 0.6f
}

val sheetState = rememberBottomSheetState(
    initialDetent = Peek,
    detents = listOf(Hidden, Peek, FullyExpanded)
)

BottomSheet(
    state = sheetState,
    modifier = Modifier.fillMaxWidth(),
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.White)
            .height(1200.dp),
        contentAlignment = Alignment.TopCenter
    ) {
        DragIndication(
            modifier = Modifier
                .padding(top = 22.dp)
                .background(Color.Black.copy(0.4f), RoundedCornerShape(100))
                .width(32.dp)
                .height(4.dp)
        )
    }
}```
Full code examples and docs at <https://composeunstyled.com/bottom-sheet/#customizing-sheet-heights>

In your case you would return the sheetHeight instead if you want wrap content

```val Detent = SheetDetent(identifier = "peek") { containerHeight, sheetHeight ->
     sheetHeight
}```

Let me know if you need any clarifications