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
Comments
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

01
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.

Up next

Android & Kotlin
WindowInsets Handling & Keyboard Animations
Until now keyboards and Androids seemed to go in opposite directions. There was no API you could query to learn if the keyboard was open or to know its size. When the keyboard popped up, the screen and views would automatically rearrange themselves without a smooth transition. In this course learn how to interact with the keyboard via WindowInsets. Read its properties, know if it’s open, and create smooth, synchronous, animations.

Instructors

Contributors

Joe Howard

Instructor

Adriana Kutenko

Illustrator

Over 300 content creators. Join our team.