Is there an easy / native way to have Compose M3 SwipeToDimiss works with long press only?

# compose

[Tolriq]

Is there an easy / native way to have Compose M3 SwipeToDimiss works with long press only?

[Chris Sinco [G]]

Could you elaborate more? Initially that sounds very confusing from a UX perspective, to have the result of a long press gesture to be what you’d expect from a swipe gesture…

[Tolriq]

That's just to add a shortcut to please some users on an already gesture complex screen. Part of bottom sheet with long scrollable list and with drag and drop to reorder on a handle view. The other solution would be to only allow the swipe to dismiss on a part of the row like the image but probably harder to handle as the image would move during the swipe and probably break the offset calculations.

[Tolriq]

The actions are available too via 3 dots and dialog but users are lazy for possibly repetitive tasks. And want to gain one click.

[Chris Sinco [G]]

So it seems like there’s a UI state that can be a result of doing a long-press, but is also mapped to SwipeToDismiss - that seems doable as long as that UI state is not specific to SwipeToDismiss

[Chris Sinco [G]]

Screenshots or videos would as well

[Tolriq]

This is the current screen, reorder via drag and drop on the handle, bottom sheet with long list (nested scroll) and the delete button. I need to add more actions, so the delete button should go under a 3 dots / dialogs. But after a decade of doing media apps users will not like to have to do 2 clicks for that action. Having simple touch to reorder + swipe to dismiss causes UX issues for the users with large finger or not precise movements. So I'm looking for a way to add more actions while still leaving the delete in at most a click distance.

[Chris Sinco [G]]

I see - seems a long press and an overflow action to open a menu with the the three actions would work fine. And a swipe to dismiss gesture could be the more common action from the menu which I assume is delete?

[Chris Sinco [G]]

The UX you are looking for seems quite close to how Apple Music handles the queue in a bottom sheet

[Tolriq]

Most common are sort and delete but I've made some tests and with compose it actually works quite better than previously with views.

[Tolriq]

Both works nicely

drag.mp4

[Tolriq]

(not yet migrated the 3 dots)

[Chris Sinco [G]]

Ohhh that’s nice! Love the bouncing effect

[Tolriq]

Yes I love compose animations are so easy now 🙂

[Tolriq]

I'm just really bad at underestanding the proper spring or other interpolator to use for each use cases 😞

[Tolriq]

Really hope to see some docs about physical world type interaction mapping to compose animations.

[Chris Sinco [G]]

Ah interesting cc @Doris Liu

[Tolriq]

I think I already asked her a long time ago 🙂 Here's some concrete example since I'm in that app. As animations are now easy I animate the skip and replays buttons with rotations and horizontal movements. I think the animation makes sense and looks nice. But since no designer at all, I have no idea if those animations makes sense or not, and what interpolators to use.
Like for the rotation I use :

scope.launch {
                replayOffset.animateTo(-90f, animationSpec = tween(150, easing = LinearOutSlowInEasing))
                replayOffset.animateTo(0f, animationSpec = tween(150, easing = FastOutSlowInEasing))
            }

But it's completely random stuff tween vs spring, easing, ... No idea how to choose them correctly 🙂 Docs have some gif to show what they do, but for a non designer it's 100% abstract when to use what. (Hope I'm clear)

anim.mp4

[Chris Sinco [G]]

As a designer, spring animations are actually more foreign to me since many (if not all) designer tools rely on the tween model. I love using spring and often times I just do it based on the feeling. Though to be honest that happens also with tweens.

[Chris Sinco [G]]

I think though there is definitely opportunity to help developers pick tasteful interpolators. Material sorta tries to do that by encapsulating their opinions within their components. This is older M2 guidance but I think is still relevant to today from an animation pattern POV: https://m2.material.io/design/motion/the-motion-system.html

[Chris Sinco [G]]

I’ve often reused the exact tweens they are using in their examples for my own, without needing to use Material components/libraries if that makes sense.

[Tolriq]

Wow thanks never saw those updated docs with the precise motions. Do you have something relative to push / press like button press animation that could serve as a base for most of those cases ?

[Chris Sinco [G]]

I don’t have a spec, but for that I would look at the Material3 button source where those details are encoded

[Tolriq]

Thanks but I do not think there's any spec or button animation on press except the ripple or should I use the ripple specs? Anyway this is not a very big deal, just my love for details that is frustrated. No user complained about my random implementation.