Configurer la prévisualisation du Retour

La prévisualisation du Retour et les animations système sont activées par défaut. Si votre application intercepte l'événement Retour et que vous n'avez pas migré vers la prévisualisation du Retour, mettez à jour votre application pour utiliser les API de retour arrière compatibles.

Animation pour la prévisualisation du Retour à l'écran d'accueil.

Animation multiactivité prédictive.

Animation prédictive multi-tâches.

Activer les animations système par défaut

Les animations système multi-activités, multitâches et de retour à l'écran d'accueil sont disponibles sur les appareils équipés d'Android 15 ou d'une version ultérieure pour les applications qui ont migré vers les API de gestion du Retour compatibles.

• Retour à l'accueil : permet à l'utilisateur de revenir à l'écran d'accueil.
• Multi-activité : transitions entre les activités au sein de l'application.
• Multitâche : transitions entre les tâches.

Ces animations sont activées par défaut sur Android 15 et versions ultérieures. Sur les appareils équipés d'Android 13 ou 14, les utilisateurs peuvent les activer dans les options pour les développeurs.

Remarque : L'interception du retour à l'activité racine (par exemple, MainActivity.kt) désactive l'animation de retour à l'écran d'accueil, et l'interception du retour à une activité désactive l'animation multi-activités.

Pour obtenir les animations système, mettez à jour votre dépendance AndroidX Activity vers la version 1.6.0 ou ultérieure.

Activer la prévisualisation du Retour avec Navigation Compose

Pour utiliser la prévisualisation du Retour dans Navigation Compose, assurez-vous d'utiliser la bibliothèque navigation-compose 2.8.0 ou version ultérieure.

Navigation Compose effectue automatiquement un fondu enchaîné entre les écrans lorsque l'utilisateur effectue un balayage vers l'arrière :

Figure 2. Animation de fondu enchaîné par défaut dans l'application SociaLite.

Lors de la navigation, vous pouvez créer des transitions personnalisées avec popEnterTransition et popExitTransition. Lorsqu'ils sont appliqués à votre NavHost, ces modificateurs vous permettent de définir l'animation des écrans d'entrée et de sortie. Vous pouvez les utiliser pour créer différents effets, comme la mise à l'échelle, l'atténuation ou le déplacement.

Dans cet exemple, scaleOut est utilisé dans popExitTransition pour réduire l'écran de sortie lorsque l'utilisateur revient en arrière. En outre, le paramètre transformOrigin détermine le point autour duquel l'animation de mise à l'échelle se produit. Par défaut, il s'agit du centre de l'écran (0.5f, 0.5f). Vous pouvez ajuster cette valeur pour que la mise à l'échelle commence à un autre endroit.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

Ce code produit le résultat suivant :

Figure 3. Animation personnalisée dans l'appli SociaLite.

popEnterTransition et popExitTransition contrôlent spécifiquement les animations lors du retrait de la pile "Retour", avec un geste de retour, par exemple. Vous pouvez également utiliser enterTransition et exitTransition pour définir des animations pour l'entrée et la sortie de composables en général, et pas seulement pour le retour prédictif. Si vous ne définissez que enterTransition et exitTransition, elles sont utilisées à la fois pour la navigation normale et pour le dépilement de la pile "Retour". Toutefois, l'utilisation de popEnterTransition et popExitTransition vous permet de créer des animations distinctes pour la navigation "Retour".

Intégrer les transitions d'éléments partagés

Les transitions d'éléments partagés permettent d'établir une connexion visuelle fluide entre les composables avec du contenu partagé, souvent utilisés pour la navigation.

Figure 4. Transition d'élément partagé avec prévisualisation du Retour dans Navigation Compose.

Pour utiliser des éléments partagés avec Navigation Compose, consultez Prévisualisation du Retour avec des éléments partagés.

Prendre en charge la prévisualisation du Retour avec les composants Material Compose

De nombreux composants de la bibliothèque Material Compose sont conçus pour fonctionner de manière fluide avec les gestes de prévisualisation du Retour. Pour activer les animations pour la prévisualisation du Retour dans ces composants, incluez la dernière dépendance Material3 (androidx.compose.material3:material3-*:1.3.0 ou version ultérieure) dans votre projet.

Voici les composants Material compatibles avec les animations de la prévisualisation du Retour :

• SearchBar
• ModalBottomSheet
• ModalDrawerSheet/DismissibleDrawerSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

SearchBar et ModalBottomSheet s'animent automatiquement avec les gestes de prévisualisation du Retour. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet et DismissibleNavigationDrawer vous obligent à transmettre drawerState à leurs composables de contenu de feuille respectifs.

Tester l'animation de la prévisualisation du geste Retour

Si vous utilisez toujours Android 13 ou Android 14, vous pouvez tester l'animation de retour à l'écran d'accueil.

Pour tester cette animation, procédez comme suit :

1. Sur votre appareil, accédez à Paramètres > Système > Options pour les développeurs.
2. Sélectionnez Animations pour la prévisualisation du Retour.
3. Lancez votre application mise à jour et utilisez le geste Retour pour le voir en action.

Sur Android 15 ou version ultérieure, cette fonctionnalité est activée par défaut.

Ressources supplémentaires

• Atelier de programmation "Ajouter des animations pour la prévisualisation du Retour"
• Vidéo sur les animations de mise en page avancées dans Compose