Is it possible to have two swipe handlers in a MotionLayout?

Issue

I want to recreate a menu (See screenshot below) from Google Play Store (Or many others google apps), but I don't know how. Screenshot of the menu

I've tried to use MotionLayout with two vertical Swipe Handlers (One with dragUp & another with dragDown) to play two different transitions on a DialogFragment, but it didn't work...

My fragment_dialog_scene.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">

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end" >
        <OnSwipe
            motion:touchAnchorId="@+id/frameLayout2"
            motion:dragDirection="dragUp"
            motion:touchAnchorSide="top" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/frameLayout2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="78dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp">
            <CustomAttribute
                motion:attributeName="radius"
                motion:customPixelDimension="2.5dp" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/frameLayout2"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <CustomAttribute
                motion:attributeName="radius"
                motion:customPixelDimension="0dp" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/dismiss"
        motion:deriveConstraintsFrom="@+id/start" >
        <Constraint
            android:id="@+id/frameLayout2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="350dp" />
    </ConstraintSet>

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/dismiss" >
        <OnSwipe
            motion:touchAnchorId="@+id/frameLayout2"
            motion:dragDirection="dragUp"
            motion:touchAnchorSide="top" />
        <OnClick />
    </Transition>
</MotionScene>

My fragment_dialog.xml.

<?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"
    android:id="@+id/motion_layout"
    app:layoutDescription="@xml/fragment_dialog_scene">

    <View
        android:id="@+id/background_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"/>

    <androidx.cardview.widget.CardView
        android:id="@+id/frameLayout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginHorizontal="16dp"
        app:cardCornerRadius="8dp">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/nested_scroll"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"/>

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.motion.widget.MotionLayout>

PS: I can't write comments, I don't have enough reputation, but you can ask me to edit the post if I need to add something.

Solution

Transitions operate between states (ConstraintSets - which represent the entire MotionLayout ViewGroup). You can have 3 states say A, B and C and two transitions say t1 and t2 such that t1 is a B to A transition and t2 is a B to C transition. Both have on swipe one up and the other down ( A <-t1- B -t2-> C)

Then when in B you will be able to swipe to A or C.

The common mistake is to think of them as actions. t1 opens X t2 open Y. Why cant I open X and open Y? The problem is that describes 4 states closed, x open, y open and , x & y open. Then if you would need more transitions between all 4 states.

A good example is the latest android calculator which has 9 states.

Answered By - hoford