DEV Community

Cover image for How to Implement Swipe-to-Action using AnchoredDraggable in Jetpack Compose
Nandani Sharma for Canopas Software

Posted on

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:

Image description

 BehindMotionSwipe    
Enter fullscreen mode Exit fullscreen mode

Image description

ScrollMotionSwipe 
Enter fullscreen mode Exit fullscreen mode

Image description

DrawerMotionSwipe

Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)