Expand and collapse CardView

Question

What is the proper way to expand a CardView?

Isn't there better solution ? Can't card view just expand itself ? — Robert Vangor, Feb 19 '16 at 09:55
it can you just need to use wrap content as height of cardview and use textview inside it below title so on click make the textview visible and viceversa — Madhur, Feb 19 '16 at 09:57

score 36 · Accepted Answer · edited Jun 20 '20 at 09:12

36

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 19 '16 at 10:32

Madhur

3,303
20
29

parent layout meaning the direct parent or the outermost layout? I am asking this because there is no effect of android:animateLayoutChanges="true" in my screen. Thank you in advance! – hetsgandhi Oct 04 '18 at 05:04
i applied to the outer most layout but there is no effect! What should i do? – hetsgandhi Oct 05 '18 at 10:11
@hetsgandhi can i see your code. then only i can tell what the problem might be.You can share a git link – Madhur Oct 06 '18 at 22:29
No offense but android:animateLayoutChanges="true" doesn't give effect if i write in the outer most layout, i tried writing in direct outer layout, which works successfully! Thanks anyways! – hetsgandhi Oct 11 '18 at 11:26
refer to my answer, both good for expand and collapse: https://stackoverflow.com/a/54156690/3260008 – Amos Oct 08 '19 at 13:58

Heisenberg · Answer 2 · 2022-04-02T15:46:34.657

25

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.

edited Apr 02 '22 at 15:46

answered Jul 28 '16 at 01:14

Heisenberg

5,514
2
32
43

1

Hi, I tried your solution. It looks good for expand. What transition would you apply to collapse the cardview? Thanks – Androidicus Aug 26 '16 at 07:47

score 17 · Answer 3 · answered Sep 13 '16 at 16:15

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();
}

score 6 · Answer 4 · edited Apr 07 '20 at 11:17

6

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)

edited Apr 07 '20 at 11:17

Satan Pandeya

3,747
4
27
53

answered Jan 12 '19 at 03:59

Amos

2,222
1
26
42

score 0 · Answer 5 · answered Jan 31 '20 at 01:46

I originally tried doing this by just adding an extra View to the bottom of my CardView and setting its visibility to gone (gone vs invisible):

tools:visibility="gone"

Then, I set the CardView height to Wrap Content and added an icon with an onClickListener that changed the extra View's visibility to visible.

The issue with this was that even when the visibility was set to gone, my CardView was still behaving like the extra View was there.

To get around this, I explicitly set the visibility of the extra View to gone in my onBindViewHolder method:

holder.defPieces.visibility = View.GONE

After this, the expandable functionality worked how I wanted it to. I wonder if there's some odd order of operations that goes on when inflating a View to display in a RecyclerView.

The issue is with `tools` namespace. Value of the attribute is applied only in layout preview when it's prefixed with `tools`. You should change it to `android` to make it work in the app. — solru, Apr 07 '23 at 05:31

score -5 · Answer 6 · edited Mar 20 '17 at 15:48

-5

mView.Click +=(sender, e) =>{
    LinearLayout temp = mView.FindViewById<LinearLayout>(Resource.Id.LinerCart);
    if (vs == false) {
        temp.Visibility = ViewStates.Gone;
        vs = true;
    } else {
        temp.Visibility = ViewStates.Visible;
        vs = false;
    }
};

edited Mar 20 '17 at 15:48

petey

16,914
6
65
97

answered Mar 20 '17 at 15:38

user7740865

11

score -5 · Answer 7 · edited Mar 24 '18 at 17:08

I got the solution ( single cardview expandable listview ) check this link http://www.devexchanges.info/2016/08/expandingcollapsing-recyclerview-row_18.html

if you add down arrow icon you just use my code

create xml

    <RelativeLayout
                android:id="@+id/layout_expand"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:paddingLeft="10dp"
                android:orientation="vertical">


                <TextView
                    android:id="@+id/item_description_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:clickable="true"
                    android:onClick="toggle_contents"
                    android:padding="10dp"
                    android:text="Guest Conditions"
                    android:textColor="@color/hint_txt_color"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:paddingBottom="15dp"
                    android:textSize="16dp"/>

                 <ImageView
                     android:layout_alignParentRight="true"
                     android:paddingTop="4dp"
                     android:paddingRight="10dp"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:src="@drawable/ic_keyboard_arrow_down"/>

                <!--content to hide/show -->
                <TextView
                    android:id="@+id/item_description"
                    android:layout_below="@+id/item_description_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:padding="10dp"
                    android:text="@string/about_txt2"
                    android:textColor="@color/hint_txt_color"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:paddingBottom="15dp"
                    android:visibility="gone"
                    android:textSize="12dp" />

            </RelativeLayout>
        </android.support.v7.widget.CardView>
    ///////////////////////////////////////////////
    Mainactivity.java

     RelativeLayout layout_expand = (RelativeLayoutfindViewById(R.id.layout_expand);
     item_description = (TextView) findViewById(R.id.item_description);
     TextView item_description_title; 
    item_description_title = (TextView) findViewById(R.id.item_description_title);
    item_description.setVisibility(View.GONE);
    ///////////////////////////////////////////////////////////////////

            animationUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
            animationDown = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down);

            layout_expand.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if(item_description.isShown()){
                        item_description.setVisibility(View.GONE);
                        item_description.startAnimation(animationUp);
                    }
                    else{
                        item_description.setVisibility(View.VISIBLE);
                        item_description.startAnimation(animationDown);
                    }
                }
            });

item_description_title.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(item_description.isShown()){
                    item_description.setVisibility(View.GONE);
                    item_description.startAnimation(animationUp);
                }
                else{
                    item_description.setVisibility(View.VISIBLE);
                    item_description.startAnimation(animationDown);
                }
            }
        });

Expand and collapse CardView

7 Answers7

Linked