MotionLayout no animation

Question

I am trying to create a collapsing view animation via MotionLayout. I want to make the view collapse when scrolling down and does not appear until the full scrolling up. My animation doesn't work now (video). Also my recycler view is not visible until the first click. What am I doing wrong? Thank

MainActivity layout:

<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:background="@color/gray_more_white"

app:layoutDescription="@xml/collapsing_toolbar"
tools:showPaths="true">

<include
    android:id="@+id/include"
    layout="@layout/toolbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<com.github.florent37.shapeofview.shapes.ArcView
    android:id="@+id/header_view"
    android:layout_width="0dp"
    android:layout_height="100dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/include"
    app:shape_arc_cropDirection="outside"
    app:shape_arc_height="20dp"
    app:shape_arc_position="bottom">

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

</com.github.florent37.shapeofview.shapes.ArcView>

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipe_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/include">

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

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

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

MotionScene:

<MotionScene
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:motion="http://schemas.android.com/apk/res-auto">

<Transition
    app:constraintSetEnd="@id/end"
    app:constraintSetStart="@id/start"
    app:duration="1000">

    <OnSwipe
        app:touchAnchorId="@id/swipe_view"
        app:dragDirection="dragDown"
        app:touchAnchorSide="top"
        app:moveWhenScrollAtTop="true"/>
</Transition>

<ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@id/header_view"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/include">
    </Constraint>
</ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@id/header_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/include">
    </Constraint>
</ConstraintSet>

</MotionScene>

Answer 1

So, after many attempts, I managed to fix this bug.

1) The trigger of the animation (in my case, RecyclerView) must necessarily be related to what the animation is directed to. And not necessarily directly (in my case RecyclerView and header are connected through Space)

2) The trigger of the animation or the element linking them should not overlap what the animation is directed to. (Those, in my case, Space should use constraintBottom_toBottomOf = "@ id / header" + marginBottom instead of constraintTop_toBottomOf = "@ id / header".

So, here is the final layout.

<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:background="@color/gray_more_white"
app:layoutDescription="@xml/catalog_motion">

<com.github.florent37.shapeofview.shapes.ArcView
    android:id="@+id/header"
    android:layout_width="0dp"
    android:layout_height="100dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/include"
    app:shape_arc_cropDirection="outside"
    app:shape_arc_height="20dp"
    app:shape_arc_position="bottom">

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

</com.github.florent37.shapeofview.shapes.ArcView>

<Space
    android:id="@+id/space"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="100dp"
    app:layout_constraintBottom_toBottomOf="@id/header"
    app:layout_constraintStart_toStartOf="@id/header"
    app:layout_constraintEnd_toEndOf="@id/header"/>

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/space" />

<include
    android:id="@+id/include"
    layout="@layout/toolbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>