Android Studio inclut un éditeur de conception visuelle pour le type de mise en page MotionLayout, ce qui facilite la création et la prévisualisation des animations.
L'Éditeur de mouvement fournit une interface simple permettant de manipuler les éléments de la bibliothèque MotionLayout qui sert de base à l'animation dans les applications Android. Sans Android Studio, la création et la modification de ces éléments nécessitent de modifier manuellement les contraintes dans les fichiers de ressources XML. L'Éditeur de mouvement peut en revanche générer le fichier XML pour vous, avec prise en charge des états de début et de fin, des images clés, des transitions et des chronologies.
Premiers pas avec l'Éditeur de mouvement :
- Créez un ConstraintLayout.
- Effectuez un clic droit sur l'aperçu dans l'éditeur de mise en page.
- Cliquez sur Convert to MotionLayout (Convertir en MotionLayout), comme indiqué ci-dessous.
Une fois qu'Android Studio a converti votre ConstraintLayout en MotionLayout, un fichier Motion Scene (un fichier .xml dans lequel _scene est ajouté au nom de fichier de votre mise en page) est également ajouté au répertoire contenant votre fichier XML.
MotionLayout devient votre mise en page racine et s'affiche dans l'interface utilisateur de l'Éditeur de mouvement. La mise en page comprend déjà un ConstraintSet de début, un ConstraintSet de fin et une transition du début à la fin.
Vous pouvez utiliser l'image de présentation pour sélectionner un ConstraintSet ou un Transition, ainsi que des composants du panneau de sélection.
Vous pouvez ensuite modifier les contraintes et les attributs du ConstraintSet de début ou de fin de la même manière que vous modifieriez un ConstraintLayout.
Si vous souhaitez créer plus d'éléments dans votre graphique, vous pouvez utiliser les icônes de création pour ajouter rapidement un geste ConstraintSet, Transition ou OnClick/OnSwipe.
Pour ajouter une image clé, cliquez d'abord sur la flèche Transition :
Cliquez ensuite dans le coin supérieur droit du volet de timeline Transition, puis sélectionnez KeyPosition :
Cette action ouvre une boîte de dialogue dans laquelle vous pouvez définir des attributs pour l'image clé.
Vous pouvez également ajouter des gestionnaires OnClick et OnSwipe à Transition dans le panneau des attributs.
Cette action ouvre une boîte de dialogue dans laquelle vous pouvez définir les attributs du clic, par exemple les composants cibles et la direction du glissement.
L'Éditeur de mouvement prend en charge la prévisualisation des animations sur la surface de conception. Lorsqu'une animation est sélectionnée, cliquez sur Play (Lire) 
au-dessus de la timeline pour la prévisualiser.
