Animation with MotionLayout

Nov 12 2019 · Video Course (28 mins) · Intermediate

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.

Version

  • Kotlin 1.3, Android 5.0, Studio 3.5.1

Animation with MotionLayout

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

1

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

2

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.

3

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

4

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

5

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

6

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

7

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.

8

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

Contributors

Comments