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.
- View the layout XML
- View the MotionScene XML for the main content
- View the MotionScene XML for the menu
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.