Fragment shared element transitions z order broken with AppBarLayout

216 Views Asked by At

I have the following layout files:

fragment_a.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="@dimen/header_height"
                android:scaleType="centerCrop"
                android:transitionName="@string/transition_image" />

            <View
                android:id="@+id/scrim"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:transitionName="@string/transition_scrim" />
    
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/contentList"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:transitionName="@string/transition_list" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

fragment_b.xml

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:transitionName="@string/transition_image" />

    <View
        android:id="@+id/scrim"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/white"
        android:alpha="0.8"
        android:transitionName="@string/transition_scrim"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbar"
                android:layout_width="match_parent"
                android:layout_height="@dimen/header_height" />
        </com.google.android.material.appbar.AppBarLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/contentList"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:transitionName="@string/transition_list"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

I am doing shared element transitions between two fragments.

The transition works fine if the toolbar is not starting to collapsed and the contentList animates on top of the scrim and image. If the app bar vertical offset is just a bit different from the expanded value the scrim and the image will animate on top of the contentList. So the z order changes while animating. What is the problem here? Does the app bar change the z value of its children when it's collapsing?

0

There are 0 best solutions below