MotionLayout is the new layout in Android, for creating amazing interactive animations in android. It’s a part of ConstraintLayout 2.0 library.
To have MotionLayout up and running in your project, and to get a feel of how it works, you’ll need
- A starting layout
- An ending layout that has the ending constraints
- And a motion scene (which defines our animation)
And That’s it .
SlideUp Motion Layout Tutorial (Code)
Lets Make our hands with code
STEP – 1
Add the required dependency in app-level build.gradle file.
// Change according to new dependency version
dependencies {
implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta6"
}
STEP – 2
Creating Start Layout
This can be our activity_main.xml
Just three views, with constraints all set! Two of these we’ll animate, and the third will stay static.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/motion_scene"
tools:context=".MainActivity">
<TextView
android:id="@+id/movingTextView"
android:text="Moving Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="@+id/button"
android:text="Slide Up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="@+id/staticTextView"
android:text="Static Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.motion.MotionLayout>
STEP – 3
Creating Ending Layout
We then create an ending layout, called activity_main_end.xml
Note: It only has the two views we intend to animate! (and their final constraints)
Also: You can see that I have used only one textView which I want to animate
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.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">
<TextView
android:id="@+id/movingTextView"
android:text="Moving Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:id="@+id/button"
android:text="Slide Up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.motion.MotionLayout>
STEP – 4
Creating the Motion Scene i.e. defining how this should animate.
This is the file that defines the type of motion/animation we want and what the starting/ending constraints are.
Let’s call it motion_scene.xml
Note: Make this xml layout in res/xml/motion_scene.xml
<?xml version="1.0" encoding="utf-8"?>
<MotionScene
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@layout/activity_main"
motion:constraintSetEnd="@layout/activity_main_end"
motion:duration="1000"> //Part A
<OnSwipe
motion:touchAnchorId="@id/button"
motion:touchAnchorSide="top"
motion:dragDirection="dragUp"/> //Part B
</Transition>
</MotionScene>
Understanding different Parts
Part A
Here we defined a Transition (the animation) with duration & a start/end pointing to the layouts.
Part B
Here we defined a swipe Trigger on the button (with up direction) — which adds interactivity.
Note: Don’t forget to add app:layoutDescription=”@xml/motion_scene”
And That’s all Folks!!