Try the Compose way  
Jetpack Compose is the recommended UI toolkit for Android. Learn how to use animations in Compose.  
[Animations in Compose →](https://developer.android.com/develop/ui/compose/animation/introduction)  
![](https://developer.android.com/static/images/android-compose-ui-logo.png)

<br />

This document contains examples of how to use[`MotionLayout`](https://developer.android.com/reference/androidx/constraintlayout/motion/widget/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.

- View the[layout XML](https://github.com/android/platform-samples/blob/main/samples/user-interface/constraintlayout/src/main/res/layout/motion_02_basic.xml).
- View the[`MotionScene`XML](https://github.com/android/platform-samples/blob/main/samples/user-interface/constraintlayout/src/main/res/xml/scene_02.xml).

**Figure 1.**Dragging a view.

## Custom attribute - backgroundColor

This example is similar to the[Basic motion](https://developer.android.com/develop/ui/views/animations/motionlayout/examples#basic)example. In addition to the basic motion, the background color of the view changes as the view moves.

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_03_custom_attribute.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_03.xml).

**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`.

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_05_imagefilter.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_05.xml).

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_06_keyframe.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_06.xml).

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

## Keyframe interpolation

This example builds on the[Keyframe position](https://developer.android.com/develop/ui/views/animations/motionlayout/examples#keyframe-position)example, adding rotation and scaling to the view transition.

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_07_keyframe.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_07.xml).

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_08_cycle.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_08.xml).

**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)](https://medium.com/google-developers/introduction-to-motionlayout-part-iii-47cd64d51a5).

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_09_coordinatorlayout.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_09.xml).

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_10_coordinatorlayout.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_10_header.xml).

**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)](https://medium.com/google-developers/introduction-to-motionlayout-part-iii-47cd64d51a5).

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_12_drawerlayout.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_12_content.xml).

**Figure 9.**Expanding \`DrawerLayout\`.

## DrawerLayout (2/2)

This example shows how to add motion to a`DrawerLayout`.

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_13_drawerlayout.xml).
- View the[`MotionScene`XML for the main content](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_12_content.xml).
- View the[`MotionScene`XML for the menu](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_13_menu.xml).

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_14_side_panel.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_14.xml).

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_15_parallax.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_15.xml).

**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)](https://medium.com/google-developers/introduction-to-motionlayout-part-iii-47cd64d51a5).

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_16_viewpager.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_15.xml).

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_23_viewpager.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_23.xml).

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_17_coordination.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_17.xml).

**Figure 15.**Combining effects to create complex motion.

## Complex motion (2/3)

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_18_coordination.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_18.xml).

**Figure 16.**Combining effects to create complex motion.

## Complex motion (3/3)

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_19_coordination.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_19.xml).

**Figure 17.**Combining effects to create complex motion.

## Fragment transition (1/2)

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/main_activity.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/main_scene.xml).

**Figure 18.**Fragment transition.

## Fragment transition (2/2)

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/main_activity.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/main_scene.xml).

**Figure 19.**Fragment transition.

## YouTube-like motion

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_24_youtube.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_24.xml).

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_25_keytrigger.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_25.xml).

**Figure 21.**Show and hide a floating action button.

## Multi-state

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

- View the[layout XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/layout/motion_26_multistate.xml).
- View the[`MotionScene`XML](https://github.com/android/views-widgets-samples/blob/master/ConstraintLayoutExamples/motionlayout/src/main/res/xml/scene_26.xml).

**Figure 22.**Different motions based on state.