MotionLayout is a powerful tool for creating complex animations and transitions in Android apps. In this tutorial, we'll explore how to use MotionLayout to create smooth motion transitions between different states of a layout.
Introduction
MotionLayout is a subclass of ConstraintLayout that allows you to animate and transition between different layouts and states. It's particularly useful for creating complex animations and transitions without writing a lot of code.
In this tutorial, we'll create a simple animation using MotionLayout to transition between three image views.
I will give 2 optional implementation to achieve this animation. First option uses steady states as ConstraintSet. Second one uses KeyAttribute and KeyPosition to start animation after half of the frame position.
Setting up the Layout
First, let's set up our layout XML file where we'll define our MotionLayout and the three image views.
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="@+id/animation_loop"
android:layout_width="match_parent"
android:layout_height="300dp"
app:layoutDescription="@xml/fragment_scene"
app:layout_constraintTop_toBottomOf="@id/customToolbar">
<ImageView
android:id="@+id/imageexp1"
android:layout_width="86dp"
android:layout_height="wrap_content"
android:rotation="-10"
android:src="@drawable/img111" />
<ImageView
android:id="@+id/imageexp2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:elevation="2dp"
android:src="@drawable/img222" />
<ImageView
android:id="@+id/imageexp3"
android:layout_width="86dp"
android:layout_height="wrap_content"
android:rotation="+10"
android:src="@drawable/img333" />
</androidx.constraintlayout.motion.widget.MotionLayout>Creating the Motion Scene Option 1
Next, let's define our motion scene in a separate XML file (fragment_scene.xml). This file will specify the transitions and animations between different states of the layout.
<?xml version="1.0" encoding="utf-8"?>
<MotionScene
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="@+id/middle"
motion:constraintSetStart="@id/start"
motion:autoTransition="animateToEnd"
motion:duration="1000">
</Transition>
<Transition
motion:constraintSetEnd="@+id/middleSteady"
motion:constraintSetStart="@id/middle"
motion:autoTransition="animateToEnd"
motion:duration="1000">
</Transition>
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@id/middleSteady"
motion:autoTransition="animateToEnd"
motion:duration="1000">
</Transition>
<Transition
motion:constraintSetEnd="@+id/endSteady"
motion:constraintSetStart="@id/end"
motion:autoTransition="animateToEnd"
motion:duration="1000">
</Transition>
<Transition
motion:constraintSetEnd="@+id/startSteady"
motion:constraintSetStart="@id/endSteady"
motion:autoTransition="animateToEnd"
motion:duration="1000">
</Transition>
<Transition
motion:constraintSetEnd="@+id/start"
motion:constraintSetStart="@id/startSteady"
motion:autoTransition="animateToEnd"
motion:duration="1000">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/imageexp1"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="-10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp2"
motion:layout_constraintHorizontal_chainStyle="packed"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:elevation="2dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp3"
motion:layout_constraintStart_toEndOf="@id/imageexp1"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp3"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="+10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@id/imageexp2"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/startSteady">
<Constraint
android:id="@id/imageexp1"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="-10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp2"
motion:layout_constraintHorizontal_chainStyle="packed"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:elevation="2dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp3"
motion:layout_constraintStart_toEndOf="@id/imageexp1"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp3"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="+10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@id/imageexp2"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/middle">
<Constraint
android:id="@id/imageexp3"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="-10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp1"
motion:layout_constraintHorizontal_chainStyle="packed"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:elevation="2dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp2"
motion:layout_constraintStart_toEndOf="@id/imageexp3"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp2"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="+10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@id/imageexp1"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/middleSteady">
<Constraint
android:id="@id/imageexp3"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="-10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp1"
motion:layout_constraintHorizontal_chainStyle="packed"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:elevation="2dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp2"
motion:layout_constraintStart_toEndOf="@id/imageexp3"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp2"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="+10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@id/imageexp1"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/imageexp2"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="-10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp3"
motion:layout_constraintHorizontal_chainStyle="packed"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:elevation="2dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp1"
motion:layout_constraintStart_toEndOf="@id/imageexp2"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp1"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="+10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@id/imageexp3"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/endSteady">
<Constraint
android:id="@id/imageexp2"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="-10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp3"
motion:layout_constraintHorizontal_chainStyle="packed"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:elevation="2dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp1"
motion:layout_constraintStart_toEndOf="@id/imageexp2"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp1"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:rotation="+10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@id/imageexp3"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
</MotionScene>Transitions
Start to Middle Transition:
Animates UI elements from the start position to the middle position.
Middle to MiddleSteady Transition:
Keep image in middle position 1000ms duration. Animation does not occur for 1000ms.
MiddleSteady to End Transition:
Moves UI elements from the steady middle position to the end position. Animation does not occur for 1000ms.
End to EndSteady Transition:
Keep image in end position 1000ms duration.
EndSteady to StartSteady Transition:
Moves UI elements from the steady end position back to the start position. Animation does not occur for 1000ms.
StartSteady to Start Transition:
Keep image in start position 1000ms duration.
Constraint Sets
Start: Initial state constraints for UI elements.
StartSteady: Constraints for a steady state at the start position.
Middle: Constraints for UI elements in the middle position.
MiddleSteady: Constraints for a steady state in the middle.
End: Constraints for UI elements at the end position.
EndSteady: Constraints for a steady state at the end position.
This setup enables smooth animations between different states of the UI elements defined by the constraint these sets.
With this setup, you can create various complex animations and transitions in your Android app using MotionLayout.
Creating the Motion Scene Option 2
Let's define our motion scene in a separate XML file (fragment_scene.xml). We will use KeyPosition and KeyAttribute to create steady states. By the help of these we prevent transition to happen for the half of the given duration. You need to specify every single changes that should steady until the half of the duration. In my case I keep steady rotation, elevation and size for 1000ms.
<?xml version="1.0" encoding="utf-8"?>
<MotionScene
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="@+id/middle"
motion:constraintSetStart="@id/start"
motion:autoTransition="animateToEnd"
motion:duration="2000">
<KeyFrameSet >
<!-- Keep steady images at 50% frame position 1000ms-->
<KeyPosition
motion:motionTarget="@+id/imageexp1"
motion:framePosition="50"
motion:keyPositionType="deltaRelative"
motion:percentX="0"
motion:percentY="0"
motion:percentHeight="0"
motion:percentWidth="0"/>
<KeyPosition
motion:motionTarget="@+id/imageexp2"
motion:framePosition="50"
motion:keyPositionType="deltaRelative"
motion:percentX="0"
motion:percentY="0"
motion:percentHeight="0"
motion:percentWidth="0" />
<KeyPosition
motion:motionTarget="@+id/imageexp3"
motion:framePosition="50"
motion:keyPositionType="deltaRelative"
motion:percentX="0"
motion:percentY="0"
motion:percentHeight="0"
motion:percentWidth="0"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp1"
motion:framePosition="50"
android:rotation="-10"
android:elevation="0dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp2"
motion:framePosition="50"
android:rotation="0"
android:elevation="2dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp3"
motion:framePosition="50"
android:rotation="+10"
android:elevation="0dp"/>
<!-- Create transition effect after 50% frame position 1000ms-->
<KeyAttribute
motion:motionTarget="@+id/imageexp1"
motion:framePosition="100"
android:rotation="0"
android:elevation="2dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp2"
motion:framePosition="100"
android:rotation="+10"
android:elevation="0dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp3"
motion:framePosition="100"
android:rotation="-10"
android:elevation="0dp"/>
</KeyFrameSet>
</Transition>
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@id/middle"
motion:autoTransition="animateToEnd"
motion:duration="2000">
<KeyFrameSet >
<!-- Keep steady images at 50% frame position 1000ms-->
<KeyPosition
motion:motionTarget="@+id/imageexp1"
motion:framePosition="50"
motion:keyPositionType="deltaRelative"
motion:percentX="0"
motion:percentY="0"
motion:percentHeight="0"
motion:percentWidth="0"/>
<KeyPosition
motion:motionTarget="@+id/imageexp2"
motion:framePosition="50"
motion:keyPositionType="deltaRelative"
motion:percentX="0"
motion:percentY="0"
motion:percentHeight="0"
motion:percentWidth="0"/>
<KeyPosition
motion:motionTarget="@+id/imageexp3"
motion:framePosition="50"
motion:keyPositionType="deltaRelative"
motion:percentX="0"
motion:percentY="0"
motion:percentHeight="0"
motion:percentWidth="0"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp1"
motion:framePosition="50"
android:rotation="0"
android:elevation="2dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp2"
motion:framePosition="50"
android:rotation="+10"
android:elevation="0dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp3"
motion:framePosition="50"
android:rotation="-10"
android:elevation="0dp"/>
<!-- Create transition effect after 50% frame position 1000ms-->
<KeyAttribute
motion:motionTarget="@+id/imageexp1"
motion:framePosition="100"
android:rotation="+10"
android:elevation="0dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp2"
motion:framePosition="100"
android:rotation="-10"
android:elevation="0dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp3"
motion:framePosition="100"
android:rotation="0"
android:elevation="2dp"/>
</KeyFrameSet>
</Transition>
<Transition
motion:constraintSetEnd="@+id/start"
motion:constraintSetStart="@id/end"
motion:autoTransition="animateToEnd"
motion:duration="2000">
<KeyFrameSet >
<!-- Keep steady images at 50% frame position 1000ms-->
<KeyPosition
motion:motionTarget="@+id/imageexp1"
motion:framePosition="50"
motion:keyPositionType="deltaRelative"
motion:percentX="0"
motion:percentY="0"
motion:percentHeight="0"
motion:percentWidth="0"/>
<KeyPosition
motion:motionTarget="@+id/imageexp2"
motion:framePosition="50"
motion:keyPositionType="deltaRelative"
motion:percentX="0"
motion:percentY="0"
motion:percentHeight="0"
motion:percentWidth="0"/>
<KeyPosition
motion:motionTarget="@+id/imageexp3"
motion:framePosition="50"
motion:keyPositionType="deltaRelative"
motion:percentX="0"
motion:percentY="0"
motion:percentHeight="0"
motion:percentWidth="0" />
<KeyAttribute
motion:motionTarget="@+id/imageexp1"
motion:framePosition="50"
android:rotation="+10"
android:elevation="0dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp2"
motion:framePosition="50"
android:rotation="-10"
android:elevation="0dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp3"
motion:framePosition="50"
android:rotation="0"
android:elevation="2dp"/>
<!-- Create transition effect after 50% frame position 1000ms-->
<KeyAttribute
motion:motionTarget="@+id/imageexp1"
motion:framePosition="100"
android:rotation="-10"
android:elevation="0dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp2"
motion:framePosition="100"
android:rotation="0"
android:elevation="2dp"/>
<KeyAttribute
motion:motionTarget="@+id/imageexp3"
motion:framePosition="100"
android:rotation="+10"
android:elevation="0dp"/>
</KeyFrameSet>
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/imageexp1"
android:layout_width="86dp"
android:layout_height="wrap_content"
android:rotation="-10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp2"
motion:layout_constraintHorizontal_chainStyle="packed"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:elevation="2dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp3"
motion:layout_constraintStart_toEndOf="@id/imageexp1"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp3"
android:layout_width="86dp"
android:layout_height="wrap_content"
android:rotation="+10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@id/imageexp2"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/middle">
<Constraint
android:id="@id/imageexp3"
android:layout_width="86dp"
android:layout_height="wrap_content"
android:rotation="-10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp1"
motion:layout_constraintHorizontal_chainStyle="packed"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:elevation="2dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp2"
motion:layout_constraintStart_toEndOf="@id/imageexp3"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp2"
android:layout_width="86dp"
android:layout_height="wrap_content"
android:rotation="+10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@id/imageexp1"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/imageexp2"
android:layout_width="86dp"
android:layout_height="wrap_content"
android:rotation="-10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp3"
motion:layout_constraintHorizontal_chainStyle="packed"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:elevation="2dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="@id/imageexp1"
motion:layout_constraintStart_toEndOf="@id/imageexp2"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/imageexp1"
android:layout_width="86dp"
android:layout_height="wrap_content"
android:rotation="+10"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@id/imageexp3"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
</MotionScene>Explaining Transitions
KeyPosition and KeyAttribute which has motion:framePosition="50" are ensuring that the transition does not occur until halfway through the animation duration. Others which has motion:framePosition="100" defines how the animation occur after half of the duration time.
In our MotionScene, we have defined three Transitions:
From Start to Middle: This transition moves the UI elements from their initial positions defined in the "start" ConstraintSet to the positions defined in the "middle" ConstraintSet. Transition happens after 1000ms steady state.
From Middle to End: This transition moves the UI elements from the positions defined in the "middle" ConstraintSet to the positions defined in the "end" ConstraintSet. Transition happens after 1000ms steady state.
From End to Start: This transition moves the UI elements from the positions defined in the "end" ConstraintSet back to their initial positions defined in the "start" ConstraintSet. Transition happens after 1000ms steady state.
Conclusion
MotionLayout offers powerful capabilities for creating complex animations and transitions in Android apps with relative ease. In this tutorial, we explored two options for implementing smooth motion transitions between different states of a layout using MotionLayout.
Option 1: In this option, we used steady states defined by ConstraintSets to create smooth transitions between different layouts. Each transition was defined with a specified duration, allowing for precise control over the animation timing. This approach is straightforward and intuitive, particularly for simpler animations.
Option 2: In this option, we utilized KeyPosition and KeyAttribute to create steady states within the transition. By specifying the frame position at which the transition should occur, we effectively delayed the animation until halfway through the duration. This approach provides more fine-grained control over the animation timing and allows for more complex animations with varying properties.
Comparison:
Option 1 is simpler and more intuitive for basic animations where steady states can be easily defined using ConstraintSets.
Option 2 offers greater flexibility and control over animation timing, particularly for more complex animations where specific properties need to be adjusted at different points during the transition.
Option 1 may be preferred for quick prototyping or simpler animations, while Option 2 is better suited for scenarios requiring precise control over animation timing and properties.
Ultimately, the choice between the two options depends on the complexity of the animation, the level of control needed, and personal preference. Both options leverage the power of MotionLayout to create smooth and engaging motion transitions in Android apps.
Comments