0

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?

RahulS
  • 11
  • 6

1 Answers1

0

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.

hoford
  • 4,918
  • 2
  • 19
  • 19
  • Can you please help with the approach? Transitions are working fine separately(tested commenting one transition and enabling second one). When they enabled together, only first transition works. Is there any method i can call programatically to enable/disable transitions? My use case is to have both transitions working for vertical videos. – RahulS May 26 '22 at 06:59
  • You can disable transitions give them and id and on motionLayout call the enableTransition(R.id.transitionID, false) You have 3 states: "collapsed" , "expanded" , "verticalCollapse" MotionLayout can only take you between states. Transition are ways to get you between states. – hoford May 26 '22 at 17:42
  • MotionLayout can only take you between states. Transition control how you get between between states. To use an analogy: A Transition is like a plane and ConstraintSets are cities. You are saying: "I know how to fly from Paris to Shanghai" & "I know how to fly from Paris to Beijing" "How do I fly from Paris to Shanghai and Beijing at the same time" From MotionLayout point of view the question does not make sense. You need to create a ConstraintSet that has all the properties of both "Shanghai and Beijing" and fly to that. To help ConstraintSets can be derived form other sets. – hoford May 26 '22 at 18:07