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)