CODEWITHSUNDEEP
androidandroid-cardview
Robert Vangor
Robert Vangor

Reputation: 1068

Expand and collapse CardView

What is the proper way to expand a CardView?

example

Upvotes: 42

Views: 78435

Answers (7)

Heisenberg
Heisenberg

Reputation: 5668

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.

Upvotes: 25

Amos
Amos

Reputation: 2670

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)

Upvotes: 6

Code on the Rocks
Code on the Rocks

Reputation: 17794

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.

Upvotes: 0

Madhur
Madhur

Reputation: 3353

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.

Upvotes: 36

Bob Galy
Bob Galy

Reputation: 1

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

Upvotes: -5

user7740865
user7740865

Reputation: 11

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

Upvotes: -5

Ray Hunter
Ray Hunter

Reputation: 15557

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

Upvotes: 17

Related Questions