Collapsing CardView Animation not working correctly : <h2>What I'm trying to do</h2>

<p>I have a <code>RecyclerView</code> with many items that are basically some <code>CardView</code>.</p>

<p>Those cards have a supporting text in the middle of their bodies, which has the visibility set to <code>GONE</code> by default, and it's made <code>VISIBLE</code> when I click the arrow on the right of the card.</p>

<p>I'm trying to animate the card while the text is revealed and while it's collapsed.</p>

<p>The picture below shows the expanded card and the collapsed one:</p>

<p><a href="https://i.stack.imgur.com/KPexfl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KPexfl.png" alt="cards"></a></p>

<p>The <code>CardView</code> layout (I've removed some parts for readability):</p>

<pre><code>&lt;android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="3dp"
    card_view:cardElevation="4dp"
    card_view:cardUseCompatPadding="true"
    android:id="@+id/root"&gt;

    &lt;LinearLayout
        android:id="@+id/item_ll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="@dimen/activity_vertical_margin"&gt;

        &lt;!-- The header with the title and the item --&gt;


        &lt;TextView
            android:id="@+id/body_content"
            style="@style/TextAppearance.AppCompat.Medium"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:layout_marginBottom="8dp"
            android:text="@string/about_page_description"
            android:textColor="@color/secondaryText"
            android:visibility="gone"/&gt;

        &lt;!-- The divider, and the footer with the timestamp --&gt;

    &lt;/LinearLayout&gt;
&lt;/android.support.v7.widget.CardView&gt;
</code></pre>

<h2>The problem</h2>

<p>The animations is working when the card is expanding and revealing the body <code>TextView</code>, however, when I try to collapse it back, the cards below the animated one overlaps the first one.</p>

<p><strong>Example:</strong></p>

<p><a href="https://i.stack.imgur.com/TCcc0.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/TCcc0.gif" alt="card animation"></a></p>

<h2>What I've tried so far</h2>

<p>I've already asked a <a href="https://stackoverflow.com/questions/41982987/collapsing-cardview-inside-recyclerview-when-animating">similar question about this behavior here</a> before, but that solution is not working for a <code>TextView</code> in the middle of the card.</p>

<p>The code that's responsible for the animation part is inside the <code>RecyclerView</code> adapter. The arrow has a click listener that calls the method below:</p>

<pre><code>private fun toggleVisibility() {
    if (bodyContent.visibility == View.GONE || bodyContent.visibility == View.INVISIBLE) {
        btSeeMore.animate().rotation(180f).start()
        TransitionManager.beginDelayedTransition(root, AutoTransition())
        bodyContent.visibility = View.VISIBLE
    }
    else {
        btSeeMore.animate().rotation(0f).start()

        TransitionManager.beginDelayedTransition(root, AutoTransition())
        bodyContent.visibility = View.GONE
    }
}
</code></pre>

<p>Where <code>root</code> is my <code>CardView</code>.</p>

<p>I've also tried to use the <code>LinearLayout</code> instead of the card itself for the delayed transition, but that didn't work either.</p>

<p>How can I achieve that behavior for my layout?</p>
