Motion Layout issue for Collapsing Toolbar Transition

Question

I'm trying to reproduce coordinator layout collapsing toolbar animation with motion layout.

The transition work very well when I scroll from recyclerview (the touchAnchorId is set to recycler) but when I scroll from the image the animation is not fluid.

I attach the collapsed and expanded layout and the collapsing scene.

Thanks in advance for the help

Expanded:

<?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"
        android:descendantFocusability="blocksDescendants"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/collapsing_scene">

    <ImageView android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:scaleType="centerCrop"
               android:id="@+id/imageview"
               android:contentDescription="@null"
               app:layout_constraintTop_toTopOf="parent"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintBottom_toBottomOf="parent"
               app:layout_constraintStart_toStartOf="parent"
               app:srcCompat="@drawable/android"/>

    <androidx.recyclerview.widget.RecyclerView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:id="@+id/recycler"
            android:background="#F44336"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/guideline"/>

    <androidx.constraintlayout.widget.Guideline
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            app:layout_constraintGuide_percent="0.5"/>

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

Collapsed:

<?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"
        android:descendantFocusability="blocksDescendants"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <ImageView android:layout_width="0dp"
               android:layout_height="0dp"
               android:scaleType="centerCrop"
               android:id="@+id/imageview"
               android:contentDescription="@null"
               app:layout_constraintTop_toTopOf="parent"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintBottom_toTopOf="parent"
               app:layout_constraintStart_toStartOf="parent"
               app:srcCompat="@drawable/android"/>

    <androidx.recyclerview.widget.RecyclerView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:id="@+id/recycler"
            android:background="#F44336"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageview"/>

    <androidx.constraintlayout.widget.Guideline
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            app:layout_constraintGuide_percent="0.5"/>

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

Transition:

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

    <Transition
            app:constraintSetEnd="@layout/collapsed"
            app:constraintSetStart="@layout/expanded"
            app:duration="500">

        <OnSwipe
                app:dragDirection="dragUp"
                app:touchAnchorId="@id/recycler"
                app:touchAnchorSide="top"
                app:onTouchUp="stop"/>
    </Transition>

</MotionScene>

what is the issue you are facing, we don't see any on the attached image — Darish, Aug 05 '19 at 11:49
@Darish the transition is not fluid and moreover when I set the clicklistener on the image I can't scroll from the image — mike5v, Aug 09 '19 at 14:20

score 0 · Answer 1 · answered Oct 28 '19 at 17:26

You can't have a real toolbar to do this animation.

<activity
        android:name=".CollapsingToolbarActivity"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">

At the end of the animation, the image is gonna "simulate" the toolbar instead.

Motion Layout issue for Collapsing Toolbar Transition

1 Answers1