Overlapping TransitionManager animations in android

Question

I am trying to expand and collapse my view with the help of TransitionManager animation. Following is the output,

See the overlapping layout while collapsing top view. How to avoid that ? I set "detailedView" (one with icons) visibility GONE and use following code for animation,

topView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TransitionManager.beginDelayedTransition(topView);
                TransitionManager.beginDelayedTransition(bottomView);
                if (detailsView.getVisibility() == View.VISIBLE) {
                    detailsView.setVisibility(View.GONE);
                    cardText.setText("Collapse Title");
                } else {
                   detailsView.setVisibility(View.VISIBLE);
                   cardText.setText("Expanded Title");

                }
            }
        });

Answer 1

I would build the animation differently. I would make a LinearLayout with the top cell with wrap_content, and when clicking I would do something like:

 valueAnimator = ValueAnimator.ofInt(titleContainer.getHeight(),titleContainer.getHeight() + newHeight );
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            titleContainer.setHeight(animation.getAnimatedValue());
        }
    });
    valueAnimator.setDuration(270);
    valueAnimator.start();

Answer 2

I had the same problem.

The first argument that the TransitionManager.beginDelayedTransition() function takes must be the parent of all the views that will interact in the transition e.g:

I have the next layout:

<!-- The scene root  -->
<LinearLayout
    android:id="@+id/transition_container" >


    <!-- First card  -->
    <androidx.cardview.widget.CardView
        android:id="@+id/expandableCard1">

        <LinearLayout
           android:id="@+id/staticHeader1">
        </LinearLayout>

        <LinearLayout
           android:id="@+id/expandableContent1">
        </LinearLayout>

    </androidx.cardview.widget.CardView>


    <!-- Second card  -->
    <androidx.cardview.widget.CardView
        android:id="@+id/expandableCard2">

        <LinearLayout
           android:id="@+id/staticHeader2">
        </LinearLayout>

        <LinearLayout
           android:id="@+id/expandableContent2">
        </LinearLayout>

    </androidx.cardview.widget.CardView>


</LinearLayout>

And my code (kotlin):

// toggle
if( expandableContent1.visibility == View.GONE ){

      // apply to the root scene
      TransitionManager.beginDelayedTransition(transition_container )

      // change the visibility of the expandable content
      expandableContent1.visibility = View.VISIBLE
      arrowBtn.setImageResource( R.drawable.ic_arrow_up_24)

} else {

      // apply to the root scene
      TransitionManager.beginDelayedTransition(transition_container )

      // change the visibility of the expandable content
      expandableContent1.visibility = View.GONE
      arrowBtn.setImageResource( R.drawable.ic_arrow_down_24)
}