motion_scene_part_ii.xml

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


    <!-- Basically with the below code, we are specifying:
        1. To create a Transition Animation. This displays
           the starting layout start, to begin with.
        2. Then when user swipes the button or drags the button
           to the right, we need to animate the button to the right.
        3. The duration of the animation is 1 second.
        4. Once the animation is completed, display the end layout
           layout.
     -->

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000"
        motion:interpolator="bounce">


        <!-- The OnSwipe is a handler that drives the animation
             based on the user's finger motion.
             1. touchAnchorId: specifies the object we should track
                (here, @+id/button). Note that the id of the button
                defined here is the same as in the starting and ending
                constraintSet.
             2. touchAnchorSide: the side of the object that should
                track your finger (right / left / top / bottom)
             3. dragDirection: the direction of the motion we are
                tracking (dragRight / dragLeft / dragUp / dragDown
                will define how the progress value will be set, from
                0 to 1)
         -->
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorId="@id/button"
            motion:touchAnchorSide="right" />
    </Transition>


    <!--
       Instead of defining our constraints in a separate
       xml file, we can define it here in the motion scene:
       This is the starting layout for the animation.
       We define a single button here that is to be animated.
     -->
    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">

            <!--
               We can define any number of custom attributes.
               For example: in this use case, we are changing
               the backgroundColor of the button.
               This is the starting color. This color will be
               changing from #D81B60 to #9999FF when the
               animation is completed.
               Custom Attributes can be any one of the following:
               1. customColorValue
               2. customIntegerValue
               3. customFloatValue
               4. customStringValue
               5. customDimension
               6. customBoolean
               
               Ensure that, when defining a custom attribute, 
               you do need to define it both in the start 
               and the end ConstraintSet.
             -->
            <CustomAttribute
                motion:attributeName="BackgroundColor"
                motion:customColorValue="#D81B60" />

        </Constraint>

    </ConstraintSet>

    <!--
       Instead of defining our constraints in a separate
       xml file, we can define it here in the motion scene:
       This is the finishing layout for the animation.
       We define a the same button here that is to be animated.
     -->
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">

            <!--
               We can define any number of custom attributes.
               For example: in this use case, we are changing
               the backgroundColor of the button.
               This is the starting color. This color will be
               changing from #D81B60 to #9999FF when the
               animation is completed.
               Custom Attributes can be any one of the following:
               1. customColorValue
               2. customIntegerValue
               3. customFloatValue
               4. customStringValue
               5. customDimension
               6. customBoolean
               
               Ensure that, when defining a custom attribute, 
               you do need to define it both in the start 
               and the end ConstraintSet.
             -->            
            <CustomAttribute
                motion:attributeName="BackgroundColor"
                motion:customColorValue="#9999FF" />

        </Constraint>

    </ConstraintSet>

</MotionScene>