Expand and collapse CardView

If you are using CardViews inside a ListView or RecyclerView see my answer for recommended way of doing it: RecyclerView expand/collapse items

If you are just using CardView then do this in your on onClickListener of cardview:

TransitionManager.beginDelayedTransition(cardview);
detailsView.setVisibility(View.VISIBLE);

By default keep the visibility of your detailsView to be GONE in your xml.


I used a cardview and an expand section item_description in the cardview. For the expand part I created a TextView below the header section (LinearLayout/item_description_layout) and when the user clicks on the header layout an expand/collapse method is called. Here is the code in the cardview:

<LinearLayout
  android:id="@+id/item_description_layout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:minHeight="48dp"
  android:paddingStart="16dp"
  android:paddingEnd="16dp"
  android:orientation="horizontal">

  <TextView
      android:id="@+id/item_description_title"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="0.9"
      android:gravity="center_vertical"
      android:text="@string/description"/>

  <ImageView
      android:id="@+id/item_description_img"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="0.1"
      android:layout_gravity="center_vertical|end"
      app:srcCompat="@drawable/ic_expand_more_black_24dp"/>

</LinearLayout>

<TextView
  android:id="@+id/item_description"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:paddingStart="16dp"
  android:paddingEnd="16dp"
  android:paddingBottom="16dp"
  android:gravity="center_vertical"
  android:visibility="gone"
  tools:text="description goes here"/>  

Here is the method that is called. I also added a ObjectAnimator to handle the expand/collapse animation of the block. This is a simple animation that uses the length of the description text.

void collapseExpandTextView() {
    if (mItemDescription.getVisibility() == View.GONE) {
        // it's collapsed - expand it
        mItemDescription.setVisibility(View.VISIBLE);
        mDescriptionImg.setImageResource(R.drawable.ic_expand_less_black_24dp);
    } else {
        // it's expanded - collapse it
        mItemDescription.setVisibility(View.GONE);
        mDescriptionImg.setImageResource(R.drawable.ic_expand_more_black_24dp);
    }

    ObjectAnimator animation = ObjectAnimator.ofInt(mItemDescription, "maxLines", mItemDescription.getMaxLines());
    animation.setDuration(200).start();
} 

Use an expandable list view with cardview

or even

You can use wrap content as height of cardview and use textview inside it below title, so on click make the textview visible and vice-versa.

but isn't it bad design ?

nope it isn't if you give some transition or animation when it's expanded or collapsed

If you want to see some default transition then just write android:animateLayoutChanges="true" in parent layout.


just a line of code before setting visibility GONE/ VISIBLE can do:

TransitionManager.beginDelayedTransition([the rootView containing the cardView], new AutoTransition()); 

no need to use the animateLayoutChanges=true in XML (this way also simple, but collapse behaviour is bad)