ConstraintSets in MotionLayout

MotionLayout is a sub-class of ConstraintLayout which allows you to animate layouts between various states(ConstraintSet). It has all the properties of ConstraintLayout. It helps manage motion and widget animation.

MotionLayout create a bridge between layout transitions and motion handling. It has a capabilities of property animation framework, TransitionManager, and CoordinatorLayout.

Adding MotionLayout

---

MotionLayout is available as a support library that you can use with API level 18+.

dependencies {
    implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha1'
}

Create MotionLayout

---

MotionLayout is a layout and builds upon ConstraintLayout rich layout capabilities.MotionLayout is fully declarative. You can fully describe in XML a complex transition, no code is expected.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/constraintset_main_detail"
    tools:context=".MainActivity">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:scaleType="center"
        app:layout_constraintHeight_percent="1"
        app:srcCompat="@drawable/sasan" />


    <TextView
        android:id="@+id/detail"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:text="@string/sasan_detail"
        app:layout_constraintTop_toBottomOf="@id/imageView" />

</android.support.constraint.motion.MotionLayout>

MotionLayout supports transitions between ConstraintSets defined in MotionScenes file kept in a separate XML file.MotionLayout links to and requires a MotionScene file using app:layoutDescription.

MotionScene

---

MotionScene describes the transition between two layouts but can animate any properties as well. Moreover, it inherently supports seekable transitions, like CoordinatorLayout.The transition can be driven purely by touch and transition to any point of it instantly. It supports touch handling and keyframes, allowing developers to easily customize transitions to their own needs.

Following MotionScene file specify the default transition, by indicating the start and end ConstraintSet id.

<?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/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000"
        motion:interpolator="linear">
        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@+id/imageView"
            motion:touchAnchorSide="bottom" />
    </Transition>
....
</MotionScene>

Transition(onSwipe)

One of the other things that are done is it allows you to control on touch directly. It’ll manage your touch events by tracking the velocity of your finger and matching it to the velocity of views in the system and naturally give you a smooth transition between them via touch.

ConstraintSet

---

ConstraintSet encapsulates all the positioning rules for your layout. You can use multiple ConstraintSet, you can then decide which set of rules to apply to your layout, on the fly, without having to recreate your views. Only their position/dimensions will change. You could initialize two ConstraintSets out of those two layouts previously in ConstraintLayout, then apply them.

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

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            motion:layout_constraintHeight_percent="1" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            motion:layout_constraintHeight_percent="0.6" />
    </ConstraintSet>

</MotionScene>

In MotionScene, you would create two ConstraintSets — one for the first position, and a second one for the second position.The main difference from a normal layout file is that we do not specify the type of widgets used here instead we put the constraints as attribute of a Constraint element.