Requires a pro subscription Pro

Animation with MotionLayout

MotionLayout is a ConstraintLayout subtype that lets you easily add animation to your user interface. See how to set up a MotionLayout with a MotionScene and ConstraintSets that transition your layout between start and end states. You'll also get a preview of the Android Studio 4.0 Motion Editor. By Joe Howard.

Leave a rating/review
Save for later
Share

Learning path

This is part of the Android UI & UX: Beyond the Basics learning path. View path.

Who is this for?

Android developers that are familiar with ConstraintLayout and want to use its MotionLayout variant to add animation to their apps.

Covered concepts

  • MotionLayout
  • MotionScene, ConstraintSet, and Transition
  • OnClick and OnSwipe
  • KeyFrameSet, KeyPosition, and KeyAttribute
  • CustomAttribute
  • Android Studio 4.0 Motion Editor

Part 1: Animation with MotionLayout

1
Toggle description

Learn about the pieces that go into a MotionLayout animation, including MotionScene, ConstraintSet, and Transition, and use them to create a basic animation.

Toggle description

See how to use animation key frames to insert intermediary positions for the moving views in between the start and end states.

Toggle description

See how to use the Transition OnSwipe tag to switch from using a view click to trigger the animation to instead use a swipe gesture.

Toggle description

Learn how to use KeyAttribute to change view properties such as alpha and rotation during the animation.

Toggle description

Utilize the capability of MotionLayout to update custom properties of views such as background color and a color filter.

Toggle description

Put together all that you've learned so far on MotionLayout to animate multiple views within your MotionScene.

Toggle description

Create a more practical example of user interface animation, a custom menu that animates open to show buttons that your user can interact with.

Toggle description

See the use of the Android Studio 4.0 Canary 1 Motion Editor, which lets you build your animation states visually and preview them in Android Studio.