Drag, Swipe & Fling
Track movement and momentum.
Drag, Swipe & Fling is a free Jetpack Compose Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Following the Finger
Dragging means tracking how far a finger moves and updating the UI to match. Compose makes this smooth with dedicated drag detectors. ✋
Detect Drag Gestures
Inside pointerInput, call detectDragGestures. Its onDrag lambda fires repeatedly with the change and the distance moved since the last event.
detectDragGestures { change, drag -> /* move */ }Accumulate the Offset
Keep a state Offset and add each drag delta to it. Then feed that offset into a Modifier so the element follows your finger.
var offset by remember { mutableStateOf(Offset.Zero) }
offset += dragApply with offset Modifier
Use the offset modifier to move a composable by your tracked pixels. Convert with roundToInt so it positions cleanly on screen.
Modifier.offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }Consume the Change
Call change.consume() in your drag handler. This tells parents you handled the event so they do not also react to it.
detectDragGestures { change, drag -> change.consume() }Limit to One Axis
Need only sideways motion? Use detectHorizontalDragGestures, or detectVerticalDragGestures for up and down. They report a single Float delta.
detectHorizontalDragGestures { _, dx -> x += dx }Swipe to Dismiss
A swipe is just a drag you judge at the end. If the finger traveled far enough, treat it as a dismiss instead of snapping back.
The High-Level draggable
For simple single-axis dragging, the draggable modifier is easier. Pair it with rememberDraggableState to collect the delta.
Modifier.draggable(state, orientation = Orientation.Horizontal)Fling Needs Velocity
A fling keeps moving after release based on speed. Track velocity with a VelocityTracker as the finger moves to capture that momentum.
val tracker = VelocityTracker()Animate the Decay
Feed the release velocity into an Animatable with a decay spec. It glides to a natural stop, mimicking real physics. 🌀
animatable.animateDecay(velocity, exponentialDecay())Know When It Ends
detectDragGestures also gives you onDragEnd and onDragCancel. Use them to snap back, settle, or kick off your fling animation.
detectDragGestures(onDragEnd = { /* fling here */ }) {...}Quick Check
What does a fling animation need that a plain drag does not?
Recap: Move with Momentum
You tracked drags with detectDragGestures, accumulated an offset, judged swipes, and used velocity for a fling. Touch now feels alive. 🎉
Frequently asked questions
Is the “Drag, Swipe & Fling” lesson free?
Yes — the full text of “Drag, Swipe & Fling” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Drag, Swipe & Fling”?
Track movement and momentum. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Drag, Swipe & Fling” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.