MotionLayout – Android

Rishabh Sharma

28 May 2019

MotionLayout is a new class of ConstraintLayout for building animations which is added in the dependency version 2.0 in ConstraintLayout.

implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1'

1	implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1'

Note: MotionLayout is available as a support library that you can use on Android systems starting with API level 18 (JellyBean MR2).

MotionLayout links to and requires a MotionScene file. The file contains one top level tag “LayoutDescription”

Let’s start by implementing it:

<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"
        <strong>app:layoutDescription="@xml/step1"</strong>>

    <ImageView
            android:id="@+id/red_star"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_star_outline"
            android:tint="?colorSecondary"
            android:contentDescription="@string/star"
            android:layout_margin="30dp"/>

</androidx.constraintlayout.motion.widget.MotionLayout>

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

<strong>app:layoutDescription="@xml/step1"</strong>>

<ImageView

android:id="@+id/red_star"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:srcCompat="@drawable/ic_star_outline"

android:tint="?colorSecondary"

android:contentDescription="@string/star"

android:layout_margin="30dp"/>

</androidx.constraintlayout.motion.widget.MotionLayout>

Here you can see a tag “layoutDescription” where I have mentioned my xml file in which the Animation is defined.

Now, In step1.xml file

<?xml version="1.0" encoding="utf-8"?>
<MotionScene
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android">

    <Transition
            app:constraintSetStart="@+id/start"
            app:constraintSetEnd="@+id/end"
            app:duration="2000">
        <!-- MotionLayout will handle clicks on @id/red_star to "toggle" the animation between the start and end -->
        <OnClick
                app:targetId="@id/red_star"
                app:clickAction="toggle"/>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
                android:id="@+id/red_star"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
                android:id="@+id/red_star"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>
    </ConstraintSet>

</MotionScene>

<?xml version="1.0" encoding="utf-8"?>

<MotionScene

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:android="http://schemas.android.com/apk/res/android">

<Transition

app:constraintSetStart="@+id/start"

app:constraintSetEnd="@+id/end"

app:duration="2000">

<OnClick

app:targetId="@id/red_star"

app:clickAction="toggle"/>

</Transition>

<Constraint

android:id="@+id/red_star"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

</ConstraintSet>

<Constraint

android:id="@+id/red_star"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintBottom_toBottomOf="parent"/>

</ConstraintSet>

</MotionScene>

Here, we have defined targetId of the view on which the animation has to be performed and its clickAction which in this case is toggle. And in the ConstraintSet, the transition of the view. Similarly, we can create different transitions.

In Transition block, we can create different animations according to our requirement.

References: