Exploration of Touch & Input in Jetpack Compose
summary
Shows how Jetpack Compose maps raw pointer events to usable gestures and ships helper APIs so you can build a working photo-grid: uses detectTapGestures for double-tap with tap-location, chooses detectTransformGestures (not transformable) for pinch-zoom with centroid, applies graphicsLayer for scale/offset, and implements long-press-and-drag multi-select by attaching detectDragGesturesAfterLongPress to the grid and resolving a modifier conflict by switching item modifiers from combinedClickable to clickable. Code and gists live at google/composephotogrid; accessibility requires extra TalkBack handling.
AI-written summary · about
chapters (20)
- 0:00Introduction to rich interactions
- 1:10Pointer input and gestures
- 3:38Gesture recognizers toolbox
- 5:43Gesture modifiers overview
- 7:06Choosing recognizers vs modifiers
- 8:29Recognize hold and apply
- 10:41Building the photo grid
- 11:43Tap to open full screen
- 14:29Double tap to zoom
- 17:41Pinch zoom and drag pan
- 19:48Tap scrim to exit
- 20:09Accessibility with TalkBack
- 21:57Multi select requirements
- 23:01State management for selection
- 25:51Long press to enter selection
- 27:16Tap to toggle selection
- 28:41Long press drag multi select
- 36:47Exit selection mode
- 37:31Resources and next steps
- 39:16Q&A and closing
related talks
38mExploration of Touch & Input in Jetpack Compose
39mUnderstand touch event mechanics and master gestures
37mTackling Newspaper-Style UI in Jetpack Compose — Three Walls: Complex Gestures, Polygon Article Regions, and Adaptive Page Layouts
43mBuilding Accessible Apps with Jetpack Compose
15mInput for all screens
31mComposing in your Canvas!
36mPractical implementations of powerful UI expressions using Jetpack Compose
18mCompose: Implementing responsive UI for larger screens