MotionLayout: Why use layout files instead of ConstraintSet.

The main reasons why you should create animations with Layout file instead of ConstraintSet.

4 min readNov 23, 2020
Detailed instructions for using Layout files instead of ConstraintSet.

Using ConstraintSet:

<!--==============================-->
    <!--[START] -> [MOVE TO CENTER]-->
    <!--==============================-->
    <Transition
        app:constraintSetEnd="@+id/move_to_center"
        app:constraintSetStart="@+id/start"
        app:duration="1000" />

    <!--==============================-->
    <!--[MOVE TO CENTER] -> [APPEARANCE FABs ADD]-->
    <!--==============================-->
    <Transition
        app:autoTransition="animateToEnd"
        app:constraintSetEnd="@+id/appearance_fabs_add"
        app:constraintSetStart="@+id/move_to_center"
        app:duration="1000">

        <KeyFrameSet>
            <KeyAttribute
                android:elevation="@dimen/dictionary_fab_elevation"
                app:framePosition="90"
                app:motionTarget="@id/fab_add" />
        </KeyFrameSet>
    </Transition>

    <!--==============================-->
    <!--[BACK MOVE TO CENTER] -> [START]-->
    <!--==============================-->
    <Transition
        app:autoTransition="animateToEnd"
        app:constraintSetEnd="@+id/start"
        app:constraintSetStart="@+id/back_move_to_center"
        app:duration="1000" />

    <!--==============================-->
    <!--START-->
    <!--==============================-->
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/fab_add">
            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="@dimen/dictionary_fab_margin_horizontal"
                android:layout_marginEnd="@dimen/dictionary_fab_margin_horizontal"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/guideV_80"
                app:layout_constraintTop_toBottomOf="@id/guideH_80"
                app:layout_constraintVertical_bias="0" />
            <CustomAttribute
                app:attributeName="crossfade"
                app:customFloatValue="0" />
            <Motion
                app:pathMotionArc="startVertical" />
            <Transform android:elevation="@dimen/dictionary_fab_elevation" />
        </Constraint>

        <Constraint android:id="@+id/layout_words_creation">
            <Layout
                android:layout_width="1dp"
                android:layout_height="1dp"
                app:layout_constraintBottom_toBottomOf="@id/fab_add"
                app:layout_constraintEnd_toEndOf="@id/fab_add"
                app:layout_constraintStart_toStartOf="@id/fab_add"
                app:layout_constraintTop_toTopOf="@id/fab_add" />
        </Constraint>
    </ConstraintSet>

    <!--==============================-->
    <!--APPEARANCE LAYOUT WORDs CREATION-->
    <!--==============================-->
    <ConstraintSet
        android:id="@+id/appearance_layout_words_creation"
        app:deriveConstraintsFrom="@id/start">
        <Constraint android:id="@+id/guideH_7">
            <Layout app:layout_constraintGuide_percent="0" />
        </Constraint>

        <Constraint android:id="@+id/no">
            <PropertySet android:visibility="invisible"/>
        </Constraint>

        <Constraint android:id="@+id/words">
            <PropertySet android:visibility="invisible"/>
        </Constraint>

        <Constraint android:id="@+id/fab_add">
            <CustomAttribute
                app:attributeName="crossfade"
                app:customFloatValue="1" />
            <Transform
                android:elevation="@dimen/dictionary_fab_elevation"
                android:rotation="360" />
        </Constraint>

        <Constraint android:id="@+id/layout_words_creation">
            <Layout
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
            <PropertySet android:visibility="visible" />
        </Constraint>
    </ConstraintSet>

    <!--==============================-->
    <!--MOVE TO CENTER-->
    <!--==============================-->
    <ConstraintSet android:id="@+id/move_to_center">
        <Constraint android:id="@+id/guideH_7">
            <Layout app:layout_constraintGuide_percent="0" />
        </Constraint>

        <Constraint android:id="@+id/no">
            <PropertySet android:visibility="invisible"/>
        </Constraint>

        <Constraint android:id="@+id/words">
            <PropertySet android:visibility="invisible"/>
        </Constraint>

        <Constraint android:id="@+id/fab_add">
            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="@dimen/dictionary_fab_margin_horizontal"
                android:layout_marginEnd="@dimen/dictionary_fab_margin_horizontal"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintEnd_toStartOf="@id/guideV_60"
                app:layout_constraintStart_toEndOf="@id/guideV_40"
                app:layout_constraintTop_toTopOf="parent" />
            <Transform
                android:elevation="@dimen/dictionary_fab_elevation"
                android:rotation="-720" />
        </Constraint>

        <Constraint android:id="@+id/fab_category">
            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="@dimen/dictionary_fab_margin_horizontal"
                android:layout_marginEnd="@dimen/dictionary_fab_margin_horizontal"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintEnd_toStartOf="@id/guideV_60"
                app:layout_constraintStart_toEndOf="@id/guideV_40"
                app:layout_constraintTop_toTopOf="parent" />
            <PropertySet android:visibility="invisible" />
        </Constraint>

        <Constraint android:id="@+id/fab_photo">
            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="@dimen/dictionary_fab_margin_horizontal"
                android:layout_marginEnd="@dimen/dictionary_fab_margin_horizontal"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintEnd_toStartOf="@id/guideV_60"
                app:layout_constraintStart_toEndOf="@id/guideV_40"
                app:layout_constraintTop_toTopOf="parent" />
            <PropertySet android:visibility="invisible" />
        </Constraint>

        <Constraint android:id="@+id/fab_file">
            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="@dimen/dictionary_fab_margin_horizontal"
                android:layout_marginEnd="@dimen/dictionary_fab_margin_horizontal"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintEnd_toStartOf="@id/guideV_60"
                app:layout_constraintStart_toEndOf="@id/guideV_40"
                app:layout_constraintTop_toTopOf="parent" />
            <PropertySet android:visibility="invisible" />
        </Constraint>
    </ConstraintSet>

    <!--==============================-->
    <!--BACK MOVE TO CENTER-->
    <!--==============================-->
    <ConstraintSet
        android:id="@+id/back_move_to_center"
        app:deriveConstraintsFrom="@+id/move_to_center">
        <Constraint android:id="@id/fab_add">
            <Motion app:pathMotionArc="startHorizontal" />
        </Constraint>
    </ConstraintSet>

    <!--==============================-->
    <!--APPEARANCE FABs ADD-->
    <!--==============================-->
    <ConstraintSet
        android:id="@+id/appearance_fabs_add"
        app:deriveConstraintsFrom="@id/move_to_center">
        <Constraint android:id="@id/fab_add">
            <Transform
                android:elevation="1dp"
                android:rotation="-405" />
        </Constraint>

        <Constraint android:id="@id/fab_category">
            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="@dimen/dictionary_fab_margin_horizontal"
                android:layout_marginEnd="@dimen/dictionary_fab_margin_horizontal"
                android:layout_marginBottom="@dimen/dictionary_fab_margin_horizontal"
                app:layout_constraintBottom_toTopOf="@id/fab_add"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintEnd_toStartOf="@id/guideV_60"
                app:layout_constraintStart_toEndOf="@id/guideV_40" />
            <PropertySet android:visibility="visible" />
            <Transform android:elevation="@dimen/dictionary_fab_elevation" />
        </Constraint>

        <Constraint android:id="@+id/fab_photo">
            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="@dimen/dictionary_fab_margin_horizontal"
                android:layout_marginEnd="@dimen/dictionary_fab_margin_horizontal"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintEnd_toStartOf="@id/guideV_40"
                app:layout_constraintStart_toEndOf="@id/guideV_20"
                app:layout_constraintTop_toBottomOf="@+id/fab_add" />
            <PropertySet android:visibility="visible" />
            <Transform android:elevation="@dimen/dictionary_fab_elevation" />
        </Constraint>

        <Constraint android:id="@+id/fab_file">
            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="@dimen/dictionary_fab_margin_horizontal"
                android:layout_marginEnd="@dimen/dictionary_fab_margin_horizontal"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintEnd_toStartOf="@id/guideV_80"
                app:layout_constraintStart_toEndOf="@id/guideV_60"
                app:layout_constraintTop_toBottomOf="@+id/fab_add" />
            <PropertySet android:visibility="visible" />
            <Transform android:elevation="@dimen/dictionary_fab_elevation" />
        </Constraint>
    </ConstraintSet>

    <!--==============================-->
    <!--CHOICE FAB CATEGORY-->
    <!--==============================-->
    <ConstraintSet
        android:id="@+id/choice_fab_category"
        app:deriveConstraintsFrom="@id/move_to_center">
        <Constraint android:id="@id/fab_category">
            <PropertySet android:visibility="visible" />
            <Transform android:elevation="@dimen/dictionary_fab_elevation" />
        </Constraint>

        <Constraint android:id="@+id/fab_add">
            <PropertySet android:visibility="invisible" />
        </Constraint>
    </ConstraintSet>

    <!--==============================-->
    <!--CHOICE FAB PHOTO-->
    <!--==============================-->
    <ConstraintSet
        android:id="@+id/choice_fab_photo"
        app:deriveConstraintsFrom="@id/move_to_center">
        <Constraint android:id="@id/fab_photo">
            <PropertySet android:visibility="visible" />
            <Transform android:elevation="@dimen/dictionary_fab_elevation" />
        </Constraint>

        <Constraint android:id="@+id/fab_add">
            <PropertySet android:visibility="invisible" />
        </Constraint>
    </ConstraintSet>

    <!--==============================-->
    <!--CHOICE FAB FILE-->
    <!--==============================-->
    <ConstraintSet
        android:id="@+id/choice_fab_file"
        app:deriveConstraintsFrom="@id/move_to_center">
        <Constraint android:id="@id/fab_file">
            <PropertySet android:visibility="visible" />
            <Transform android:elevation="@dimen/dictionary_fab_elevation" />
        </Constraint>

        <Constraint android:id="@+id/fab_add">
            <PropertySet android:visibility="invisible" />
        </Constraint>
    </ConstraintSet>
</MotionScene>