How to Implement Swipe-to-Action using AnchoredDraggable in Jetpack Compose

AnchoredDraggable is designed to create components you can drag between specific states, just like those modal bottom sheets you’ve seen.

The best part? This API takes over the role of Material’s Swipeable API, offering a more versatile approach.

Table of Contents

• Add Dependency
• AnchoredDraggable Modifier
• BehindMotionSwipe example
• ScrollMotionSwipe example
• DrawerMotionSwipe example

Let’s see what we implement in this blog.
Three variants of swipe-to-action:

GIF

 BehindMotionSwipe    

GIF

ScrollMotionSwipe 

GIF

DrawerMotionSwipe

What is AnchoredDraggableState?

The AnchoredDraggableState helps you manage and control draggable elements with anchor points in your app.

Now, let's dive into the code and bring your UI to life.

To get started, head over to the Coding Page and embark on this journey to unlock the potential of Swipe-to-Action in Jetpack Compose.

To unlock the full potential of this innovative technique and discover more exciting tips and tricks for app development, visit to Canopas Blog.

Follow Canopas for our latest technical blog posts!