Gesture-Driven Transitions

This Android playground demonstrates transitions whose visual state follows the user's back gesture in real time.

Android's predictive-back APIs report continuous progress while a gesture is underway. The app maps that progress to translation, scale, corner radius, shadow, scrim opacity, and the movement of the screen underneath. The result is the direct, tactile response found in apps such as Telegram, Gmail, and Google Calendar.

To keep the focus on motion, the sample uses only three kinds of content:

• Home — a list of green A items and an orange B shortcut.
• A screens — open and close horizontally.
• The B screen — opens and closes vertically, even though Android's back gesture still starts at a side edge.

This limited set makes the differences between the transitions easy to see and keeps the relevant code easy to find.

There are two versions of each back transition:

• A normal animation when Back is triggered by the toolbar or button navigation.
• An interactive animation when Android supplies predictive-back progress from a gesture.

During the predictive version, the outgoing screen becomes a card while Home shifts and settles underneath it. A scrim helps separate the two layers. Releasing the gesture completes the pop; cancelling it returns both layers smoothly to their original state.

The physical edge where the swipe begins controls the A card's movement during the drag. The final navigation direction follows the layout direction, which keeps the motion consistent in RTL. B uses the same gesture progress but maps it to vertical movement instead.

The implementation separates three responsibilities:

1. Navigation. Nav3 owns the back stack, while NavDisplay provides hooks for regular push/pop transitions and predictivePopTransitionSpec.
2. Gesture progress. The current animated-content transition reports how far predictive back has progressed to the outgoing card and the revealed underlay.
3. Rendering. Standard Compose APIs apply translation, scale, rounded clipping, and shadow through graphicsLayer, while a separate composable draws the scrim.

Nav3 provides the navigation integration used by this sample, but it is not a requirement for the underlying visual treatment. The card, underlay, scrim, and motion calculations use standard Compose APIs and can be driven by any source that supplies equivalent gesture progress.

• AppNavHost.kt wires the back stack, screens, and transition hooks together.
• NavigationTransitions.kt contains the regular horizontal and vertical slide transitions.
• PredictiveBackCard.kt transforms the screen being popped.
• PredictiveBackUnderlay.kt moves and safely scales the screen underneath without exposing empty edges.
• NavigationScrim.kt adds depth while one screen covers another.
• SwipeEdge.kt represents physical swipe edges explicitly instead of passing raw integer constants through the transition code.

The Git history presents the implementation in five focused steps:

1. Initial project setup
2. Baseline Nav3 navigation, with no custom motion
3. Regular slide transitions
4. Gesture-driven predictive-back transitions
5. Predictive motion for the screen underneath

Open the project in Android Studio, let Gradle sync, and run the app configuration on an Android 14 or newer device or emulator.

Enable gesture navigation in the device's system settings to test predictive back. The toolbar Back button remains available for comparison with the non-interactive transition.

The project currently uses:

• Kotlin and Jetpack Compose
• Material 3
• Navigation 3 (NavDisplay)
• Android's predictive-back APIs
• Minimum SDK 34