So our UX is looking for additional anchors for Bo...

# compose

[mattinger]

So our UX is looking for additional anchors for BottomSheetScaffold, other than just Collapsed or Expanded. I found one or two stack overflow articles on this, but nothing completely concrete. Basically they want to drag up and have snap points at various percentages of the container height. Such as 33%, 50% and then 100%

[Stylianos Gakis]

See https://kotlinlang.slack.com/archives/CJLTWPH7S/p1672731480417259?thread_ts=1672666089.172449&cid=CJLTWPH7S and this https://kotlinlang.slack.com/archives/CJLTWPH7S/p1675615751678969?thread_ts=1675247702.945169&cid=CJLTWPH7S
I think they may assist in figuring out how to solve this for yourself.

[mattinger]

I agree that it doesn’t necessarily conform to material guidelines, but google’s own maps application has multiple bottom sheet heights. I just produced this on my own phone by searching for restaurants and clicking on one. It gives me a horizontal carousel (or whatever term you want to use) with some results.

the peeked version shows the name, star rating a little basic info.
swipe up, and you get a card complete with some images and the directions, call and save buttons.
swipe up again and you get a a full screen version with even more info.

[Stylianos Gakis]

Yeah, I don’t think google maps is conforming to those either, they must have their own custom implementation.

[mattinger]

I did find a stack overflow that helped me build something that can do this (sort of). It just doesn’t animate as you drag, which is not desirable. Plus it only expands one level at time, instead of tracking how much you’re dragging to decide what to do.

[Stylianos Gakis]

If you really need to get this right, what I’d do is go and copy the existing material3 code and try and go from there, adjusting it as you go. I know sometimes this is much harder than others, but in the times I’ve tried it it worked rather well. Maybe this is a bit more complicated than normal though