MotionLayout Tutorial: Creating Advanced UI Animations for Android Apps

Step 1: Add Dependency

Include the latest ConstraintLayout (2.0+) in build.gradle, for example:

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'
}

Or use the support library equivalent if not using AndroidX.

Step 2: Create Layout and MotionScene

Create a layout file (e.g., activity_motion_demo.xml) with a MotionLayout root and reference a MotionScene XML via app:layoutDescription:

<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_motion_demo_scene">
    <!-- Views go here -->
</androidx.constraintlayout.motion.widget.MotionLayout>

In the MotionScene file define a <Transition> linking start and

end

<ConstraintSet>

elements and optionally an <OnSwipe> for gesture‑driven animation:

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="1000">
        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@id/iv_main"
            motion:touchAnchorSide="bottom"/>
    </Transition>
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/iv_main" ... />
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/iv_main" ... />
    </ConstraintSet>
</MotionScene>

Step 3: Add Animations

Define the start and end states for each view inside the corresponding <ConstraintSet>. Use a <KeyFrameSet> to insert <KeyPosition>, <KeyAttribute>, <KeyCycle>, etc., for fine‑grained control of motion paths, scaling, alpha, rotation, and custom attributes such as text size.

<KeyFrameSet>
    <KeyPosition
        motion:framePosition="50"
        motion:motionTarget="@+id/iv_share"
        motion:percentX="0.7"
        motion:percentY="0.5"
        motion:keyPositionType="deltaRelative"/>
    <KeyAttribute
        motion:framePosition="50"
        motion:motionTarget="@+id/iv_like"
        android:scaleX="0.2"
        android:scaleY="0.2"/>
</KeyFrameSet>

Custom view properties can be animated with <CustomAttribute>, for example changing textSize of a TextView between states.

Step 4: Preview and Run

In Android Studio switch to the Design panel to view the start and end states, click the preview arrows, and press the play button to see the animation. Run the app on a device to observe the final effect.

Commonly Used MotionLayout Attributes

Key attributes include layoutDescription, showPaths, motionDebug, currentState, motionProgress, as well as Transition properties such as duration, autoTransition, motionInterpolator, and interaction tags OnClick and OnSwipe.