Motionlayout two transitions not working properly

Question

We are creating a transitions like youtube. We have exo player area and recyclerview underneath.

1. When user drags top player area it should collapse and become mini player.
2. When vertical video comes(9:16), scrolling recyclerview should minimise player view height to default 16:9 height.

Both of these transitions independently are working fine.

I have created two transitions for this in a motion file.One transition is from player area onswipe and other is from recyclerview underneath.Both of these transitions independently are working fine.If we switch off first one, second one works and vice verse.

Problem is both of these motion files are not working parallely. Only the first transition is working for each case. Below is my scene file:

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<Transition
    android:id="@+id/transition_mini_player"
    app:constraintSetEnd="@id/collapsed"
    app:constraintSetStart="@id/expanded"
    app:duration="300"
    app:motionInterpolator="easeInOut">

    <OnSwipe
        app:dragDirection="dragDown"
        app:maxAcceleration="200"
        app:touchAnchorId="@+id/player_holder"
        app:touchAnchorSide="bottom" />

    <KeyFrameSet>

        <KeyAttribute
            android:alpha="0"
            app:framePosition="5"
            app:motionTarget="@id/toolbar" />

        <KeyAttribute
            android:alpha="0"
            app:framePosition="5"
            app:motionTarget="@id/video_controller_container" />

        <KeyAttribute
            android:alpha="0"
            app:framePosition="5"
            app:motionTarget="@id/play_pause_button" />

        <KeyAttribute
            app:motionTarget="@+id/close_imageView"
            app:framePosition="90"
            android:alpha="0" />
        <KeyAttribute
            app:motionTarget="@+id/play_imageView"
            app:framePosition="90"
            android:alpha="0" />
        <KeyAttribute
            app:motionTarget="@+id/next_imageView"
            app:framePosition="90"
            android:alpha="0" />
        <KeyAttribute
            app:motionTarget="@+id/title_textView"
            app:framePosition="95"
            android:alpha="0" />

        <KeyAttribute
            app:framePosition="0"
            app:motionTarget="@id/player_holder">
            <CustomAttribute
                app:attributeName="EndPadding"
                app:customDimension="@dimen/video_view_right_padding" />
        </KeyAttribute>

        <KeyAttribute
            app:framePosition="20"
            app:motionTarget="@id/player_holder">
            <CustomAttribute
                app:attributeName="EndPadding"
                app:customDimension="0dp" />
        </KeyAttribute>

        <KeyAttribute
            app:framePosition="0"
            app:motionTarget="@id/viewContainer">
            <CustomAttribute
                app:attributeName="cardElevation"
                app:customDimension="5dp" />
        </KeyAttribute>

        <KeyAttribute
            app:framePosition="3"
            app:motionTarget="@id/viewContainer">
            <CustomAttribute
                app:attributeName="cardElevation"
                app:customDimension="0dp" />
        </KeyAttribute>

    </KeyFrameSet>
</Transition>

<Transition
    android:id="@+id/vertical_transition"
    app:constraintSetEnd="@id/verticalCollapse"
    app:constraintSetStart="@id/expanded"
    app:motionInterpolator="easeIn"
    app:duration="500">

    <OnSwipe
        app:dragDirection="dragUp"
        app:touchAnchorId="@id/recycler_view"
        app:touchRegionId="@id/recycler_view"
        app:moveWhenScrollAtTop="true"
        app:touchAnchorSide="top" />

</Transition>
<ConstraintSet android:id="@+id/expanded">
    <Constraint
        android:id="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        app:layout_constraintTop_toTopOf="parent"
        app:visibilityMode="ignore" />

    <Constraint
        android:id="@+id/play_pause_button"
        android:layout_width="30dp"
        android:layout_height="30dp"
        app:layout_constraintBottom_toBottomOf="@+id/player_holder"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/player_holder"
        app:visibilityMode="ignore"
        />
</ConstraintSet>

<ConstraintSet android:id="@+id/collapsed">

    <Constraint
        android:id="@+id/toolbar"
        android:alpha="0"
        app:layout_constraintTop_toTopOf="parent" />

    <Constraint
        android:id="@id/viewContainer"
        android:layout_height="60dp"
        android:layout_marginBottom="65dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

   <!-- <Constraint
        android:id="@+id/player_parent"
        android:layout_height="60dp"
        android:layout_width="100dp"
        app:layout_constraintStart_toStartOf="@+id/viewContainer"
        app:layout_constraintTop_toTopOf="@+id/viewContainer" />-->

    <Constraint
        android:id="@+id/player_holder"
        android:layout_height="60dp"
        android:layout_width="100dp"
        app:layout_constraintStart_toStartOf="@+id/viewContainer"
        app:layout_constraintTop_toTopOf="@+id/viewContainer" />

    <Constraint
        android:id="@+id/video_controller_container"
        android:alpha="0"
        app:layout_constraintBottom_toBottomOf="@+id/player_holder"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <Constraint
        android:id="@+id/play_pause_button"
        android:alpha="0"
        />

    <Constraint
        android:id="@id/recycler_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="parent" />

    <Constraint
        android:id="@+id/close_imageView"
        app:layout_constraintEnd_toEndOf="@id/viewContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/viewContainer"
        android:layout_marginEnd="16dp"
        android:alpha="1"
        app:layout_constraintTop_toTopOf="@id/viewContainer" />

    <Constraint
        android:id="@+id/next_imageView"
        app:layout_constraintEnd_toStartOf="@+id/close_imageView"
        android:layout_width="30dp"
        android:layout_height="30dp"
        app:layout_constraintBottom_toBottomOf="@+id/close_imageView"
        android:layout_marginEnd="24dp"
        android:alpha="1"
        app:layout_constraintTop_toTopOf="@+id/close_imageView" />

    <Constraint
        android:id="@+id/play_imageView"
        app:layout_constraintEnd_toStartOf="@+id/next_imageView"
        android:layout_width="30dp"
        android:layout_height="30dp"
        app:layout_constraintBottom_toBottomOf="@+id/next_imageView"
        android:layout_marginEnd="24dp"
        android:alpha="1"
        app:layout_constraintTop_toTopOf="@+id/next_imageView" />

    <Constraint
        android:id="@+id/title_textView"
        app:layout_constraintEnd_toStartOf="@+id/play_imageView"
        app:layout_constraintStart_toEndOf="@+id/player_holder"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/play_imageView"
        android:layout_marginEnd="12dp"
        android:alpha="1"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toTopOf="@+id/play_imageView" />

</ConstraintSet>

<ConstraintSet android:id="@+id/verticalCollapse">

    <Constraint
        android:id="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        app:layout_constraintTop_toTopOf="parent"
        app:visibilityMode="ignore" />

    <Constraint
        android:id="@+id/player_holder"
        android:layout_width="match_parent"
        android:layout_height="208dp"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/recycler_view"/>

    <Constraint
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/player_holder"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>


</ConstraintSet>

How can I make both these transitions run successfully and not affecting each other?

Answer 1

MotionLayout deals with ConstraintSets and transitions between ConstraintSets. A ConstraintSet represents all the children of a ConstraintSet.

It is wrong to think of MotionLayout as "This transition makes x Smaller" Think this transition takes you to this layout.