Android TransitionManager Views below not animated

Question

ScreenRecording

I like the animation of the cardView at the top, but the views below arent animated and just snap in place. How can I animate them in a way that there is no overlapping? This is not a recyclerView, these are individual cardViews.

Code for the CardView at the top:

imageViewMuellExtend = (ImageView) root.findViewById(R.id.imageViewMuellExtend);
    imageViewMuellExtend.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            muell_extend = (ConstraintLayout) root.findViewById(R.id.muell_extend);
            cardViewMuell = (CardView) root.findViewById(R.id.cardViewMuell);

            if(muell_extend.getVisibility() == View.GONE){
                TransitionManager.beginDelayedTransition(cardViewMuell, new AutoTransition());
                muell_extend.setVisibility(View.VISIBLE);
                imageViewMuellExtend.setBackgroundResource(R.drawable.ic_keyboard_arrow_up_black_24dp);
            } else {
                TransitionManager.beginDelayedTransition(cardViewMuell, new AutoTransition());
                muell_extend.setVisibility(View.GONE);
                imageViewMuellExtend.setBackgroundResource(R.drawable.ic_keyboard_arrow_down_black_24dp);
            }
        }
    });

XML Layout of the CardView:

<androidx.cardview.widget.CardView
        android:id="@+id/cardViewMuell"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:cardCornerRadius="8dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="16dp">

                <ImageView
                    android:id="@+id/imageViewMuellIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_delete_black_24dp"
                    android:tint="@color/colorAccent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="16dp"
                    android:text="Müll"
                    android:textColor="#000000"
                    android:textSize="18sp"
                    app:layout_constraintBottom_toBottomOf="@+id/imageViewMuellIcon"
                    app:layout_constraintStart_toEndOf="@id/imageViewMuellIcon"
                    app:layout_constraintTop_toTopOf="@+id/imageViewMuellIcon"
                    app:layout_constraintVertical_bias="0.0" />

                <ImageView
                    android:id="@+id/imageViewMuellExtend"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_margin="16dp"
                    android:background="@drawable/ic_keyboard_arrow_down_black_24dp"
                    app:layout_constraintBottom_toBottomOf="@+id/imageViewMuellIcon"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/imageViewMuellIcon" />

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/muell_extend"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:visibility="gone"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/imageViewMuellIcon">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="8dp"
                        android:text="@string/info_muell"
                        android:textColor="#000000"
                        android:textSize="18sp"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />
                </androidx.constraintlayout.widget.ConstraintLayout>


            </androidx.constraintlayout.widget.ConstraintLayout>


        </androidx.cardview.widget.CardView>

Every CardView in this Fragment looks like this and the items are just renamed.

Answer 1

The first argument you're passing into TransitionManager.beginDelayedTransition is the sceneRoot. The transition will only affect views inside sceneRoot, nothing outside of it.

You're passing cardViewMuell as this argument, meaning the transition will animate views inside the clicked card, but none of the other cards. Try passing a sceneRoot that contains all of the cards.