Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expand and collapse CardView

What is the proper way to expand a CardView?

example

like image 727
Robert Vangor Avatar asked Feb 19 '16 08:02

Robert Vangor


People also ask

When should I use CardView?

CardView is a new widget in Android that can be used to display any sort of data by providing a rounded corner layout along with a specific elevation. CardView is the view that can display views on top of each other. The main usage of CardView is that it helps to give a rich feel and look to the UI design.

Which attribute adds shadow to CardView?

CardView uses elevation property on Lollipop for shadows and falls back to a custom emulated shadow implementation on older platforms. Due to expensive nature of rounded corner clipping, on platforms before Lollipop, CardView does not clip its children that intersect with rounded corners.

How do I set text in CardView?

Put an id to the TextView you want to change during card view click event. Then setOnclickListener to the CardView, on the callback of clicklistener get the reference of the TextView if it exists set a new text to it.


2 Answers

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.

like image 154
Madhur Avatar answered Oct 03 '22 12:10

Madhur


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 the 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.

like image 29
Heisenberg Avatar answered Oct 03 '22 13:10

Heisenberg