SlideUp Motion Layout in Android Studio

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!!