MotionLayout examples

Try the Compose way
Jetpack Compose is the recommended UI toolkit for Android. Learn how to use animations in Compose.
Animations in Compose →

This document contains examples of how to use MotionLayout. Each example includes a video demonstrating the motion, along with corresponding code for the motion scene and layouts.

Basic motion

This example contains a single view that you can touch and drag to move horizontally.

Figure 1. Dragging a view.

Custom attribute - backgroundColor

This example is similar to the Basic motion example. In addition to the basic motion, the background color of the view changes as the view moves.

Figure 2. Dragging a view while its background color changes.

ImageFilterView - image transition

This example shows how to transition the saturation value of an ImageFilterView.

Figure 3. Dragging an image while its saturation changes.

Keyframe position

This example uses <KeyFrameSet> to alter the Y position of the view during motion.

Figure 4. Dragging a view and altering its Y position.

Keyframe interpolation

This example builds on the Keyframe position example, adding rotation and scaling to the view transition.

Figure 5. Dragging a view and altering its Y position, rotation, and scale.

Keyframe cycle

This example adds <KeyCycle> elements to add wavelike motion to the view.

Figure 6. Dragging a view with a wavelike motion while altering its color.

CoordinatorLayout (1/2)

This example adds a MotionLayout to an existing AppBarLayout to add motion to the app bar. This example is further described in Introduction to MotionLayout (part III).

Figure 7. Scrolling content while the app bar expands.

CoordinatorLayout (2/2)

This example adds a MotionLayout to an existing AppBarLayout to add motion to the app bar.

Figure 8. Scrolling content while the app bar expands and text animates in and out of the app bar.

DrawerLayout (1/2)

This example shows how to add motion to a DrawerLayout. This example is further described in Introduction to MotionLayout (part III).

Figure 9. Expanding `DrawerLayout`.

DrawerLayout (2/2)

This example shows how to add motion to a DrawerLayout.

Figure 10. Expanding `DrawerLayout` with animated menu text.

Side panel

This example shows how to display a side panel when dragging the main content area to the right.

Figure 11. Showing a side panel by dragging the main content.

Parallax

This example demonstrates a parallax background, where different background layers move at different speeds.

Figure 12. Parallax effect in the header image.

ViewPager

This example shows how you can add motion when swiping between ViewPager tabs. This example is further described in Introduction to MotionLayout (part III).

Figure 13. Parallax effect in the header image while swiping a `ViewPager`.

ViewPager - Lottie

This example shows how you can add motion when swiping between ViewPager tabs.

Figure 14. An image showing a Lottie effect in the header image while swiping a `ViewPager`.

Complex motion (1/3)

This example combines elements from previous examples to demonstrate complex motion.

Figure 15. Combining effects to create complex motion.

Complex motion (2/3)

This example combines elements from previous examples to demonstrate complex motion.

Figure 16. Combining effects to create complex motion.

Complex motion (3/3)

This example combines elements from previous examples to demonstrate complex motion.

Figure 17. Combining effects to create complex motion.

Fragment transition (1/2)

This example shows how you can use MotionLayout to transition between fragments.

Figure 18. Fragment transition.

Fragment transition (2/2)

This example shows how you can use MotionLayout to transition between fragments.

Figure 19. Fragment transition.

YouTube-like motion

This example demonstrates transitioning between a compact view and a full-screen experience with additional content.

Figure 20. Fragments transition similar to YouTube.

KeyTrigger

This example demonstrates how to show and hide a floating action button when the transition crosses a progress threshold.

Figure 21. Show and hide a floating action button.

Multi-state

This example shows how to use state to determine which motion to apply.

Figure 22. Different motions based on state.