MotionLayout: Why use layout files instead of ConstraintSet.

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

The animation itself.

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>

Using Layout files:

Six Animation State Files.

fragmtnt_dictionary_start.

fragmtnt_dictionary_set_1.

fragmtnt_dictionary_set_2.

fragmtnt_dictionary_set_3.

fragmtnt_dictionary_set_4.

fragmtnt_dictionary_set_5.

And the substitution itself layout files:

MotionScene.

Feedback.