MotionLayout examples

Stay organized with collections Save and categorize content based on your preferences.

This topic contains examples of how to use MotionLayout. Each example contains an animated GIF of 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.

Custom attribute - backgroundColor

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

ImageFilterView - image transition

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

Keyframe position

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

Keyframe interpolation

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

Keyframe cycle

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

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

CoordinatorLayout (2/2)

This example adds a MotionLayout to an existing AppBarLayout to add motion to 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).

DrawerLayout (2/2)

This example shows how to add motion to a DrawerLayout.

Side panel

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

Parallax

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

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

ViewPager - Lottie

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

Complex motion (1/3)

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

Complex motion (2/3)

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

Complex motion (3/3)

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

Fragment transition (1/2)

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

Fragment transition (2/2)

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

YouTube-like motion

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

KeyTrigger

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

Multi-state

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