android - Back Transitions In Motion Layout

Question

I am trying to do a simple animation where on swiping the textview the button becomes visible and when clicking the button the button becomes invisible. The problem is I am able to do it the first time but when I try to do it again I need to reverse swipe the textview in the opposite direction before swiping again to show the button. It is like clicking the button makes it invisible but doesn't set the swipe action for textview.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_check_scene"
    app:motionDebug="SHOW_ALL"
    >

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="152dp"
        android:layout_marginEnd="24dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="152dp"
        android:text="Button"
        android:visibility="invisible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />
</androidx.constraintlayout.motion.widget.MotionLayout>

---

<?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">
       <KeyFrameSet>
       </KeyFrameSet>
        <OnSwipe
            motion:touchAnchorId="@+id/textView3"
            motion:dragDirection="dragLeft"
            motion:touchAnchorSide="left" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/button2"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            motion:layout_constraintTop_toBottomOf="@+id/textView3"
            motion:layout_constraintHorizontal_bias="0.498"
            motion:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="152dp" />
        <Constraint
            android:id="@+id/textView3"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="24dp"
            android:layout_marginStart="24dp"
            motion:layout_constraintHorizontal_bias="1.0"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="152dp" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button2"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="visible"
            motion:layout_constraintTop_toBottomOf="@+id/textView3"
            motion:layout_constraintHorizontal_bias="0.498"
            motion:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="152dp" />
        <Constraint
            android:id="@+id/textView3"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="24dp"
            android:layout_marginStart="24dp"
            motion:layout_constraintHorizontal_bias="1.0"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="152dp" />
    </ConstraintSet>
    <Transition
        android:id="@+id/back"
        motion:constraintSetStart="@+id/end"
        motion:constraintSetEnd="@+id/start" >
        <OnClick
            motion:clickAction="toggle"
            motion:targetId="@+id/button2" />
    </Transition>
</MotionScene>

Answer 1

It doesn't work because after the swipe the first transition is in the end state. So, in order for you to be able to swipe again to display the button, you need to set it somehow in the start position. The easiest solution would be to move the click trigger into the first transition, like this:

<Transition
        motion:constraintSetEnd="@id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
    <OnSwipe
            motion:touchAnchorId="@+id/textView3"
            motion:dragDirection="dragLeft"
            motion:touchAnchorSide="left"/>
    <OnClick
            motion:clickAction="toggle"
            motion:targetId="@+id/button2" />
</Transition>