title: Collapsing CardView inside RecyclerView when animating
body: <h2>What I'm trying to do</h2>
  
  <p>I have a <code>CardView</code> with a supporting text on the bottom that is <code>GONE</code> by default. I want to make this section of the card visible only when the user clicks the "action arrow", as shown on the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/CYvwg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CYvwg.png" alt="Expand Arrow"></a></p>
  
  <p>I know I can achieve that by simply setting that <code>View</code> visibility to <code>VISIBLE</code>, but I also want to animate the expand and the collapse events.</p>
  
  <h2>The problem and what I've tried so far</h2>
  
  <p>To do that I've used the <code>android:animateLayoutChanges="true"</code> property on my <code>CardView</code> xml, and it works just fine when it's expanding. But once I click on the arrow again to collapse the supporting text, the card below overlaps the card I've clicked during the animation. How can I avoid this overlapping?</p>
  
  <p><strong>EDIT:</strong> I know it may be possible to do something like the <a href="https://stackoverflow.com/questions/7414065/android-scale-animation-on-view">solution on this question</a>, but it seems overly complicated since the <code>android:animateLayoutChanges</code> option exists. I wonder if it's possible to solve my issue using that XML property, to keep it simple.</p>
  
  <p>My animation code is as follows:</p>
  
  <p><strong>Java code</strong></p>
  
  <pre><code>protected void expandCard() {
      if (isExpanded) {
          ibt_show_more.animate().rotation(0).start();
          isExpanded = false;
          tv_support.setVisibility(View.GONE);
      }
      else {
          ibt_show_more.animate().rotation(180).start();
          isExpanded = true;
          tv_support.setVisibility(View.VISIBLE);
      }
  }
  </code></pre>
  
  <p><strong>XML code</strong></p>
  
  <pre><code>&lt;android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:card_view="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="@dimen/spacing_small"
      card_view:cardCornerRadius="2dp"
      android:id="@+id/os_list_item_cv"&gt;
  
      &lt;RelativeLayout
          android:id="@+id/os_list_item_rl_root"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:animateLayoutChanges="true"&gt;
  
          &lt;!-- Here goes the header, the image, the action buttons and so on --&gt;
          &lt;!-- Omitted on purpose --&gt;
          &lt;!-- ... --&gt;
  
          &lt;!-- This is the support TextView --&gt;
          &lt;TextView
              android:id="@+id/tv_support"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_below="@+id/os_list_item_rl_actions"
              android:text="@string/bacon_ipsum"
              android:paddingBottom="24dp"
              android:paddingEnd="16dp"
              android:paddingRight="16dp"
              android:paddingLeft="16dp"
              android:paddingStart="16dp"
              android:visibility="gone"/&gt;
  
      &lt;/RelativeLayout&gt;
  
  &lt;/android.support.v7.widget.CardView&gt;
  </code></pre>
  
  <h2>GIF for completeness (With wrong collapse behavior)</h2>
  
  <p><a href="https://i.stack.imgur.com/uiUVy.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/uiUVy.gif" alt="enter image description here"></a></p>