Home android How do I expand and collapse the CardView in Android?

How do I expand and collapse the CardView in Android?

Author

Date

Category

I saw how many people use CardView, as an example:
Closed

Open

But I can’t figure out how to expand and collapse it like that. I ask for help or sample code.

P.S. It seems like I heard what is done with Transition


Answer 1, authority 100%

The easiest way is to use a ready-made library like ExpandableView

Expandable RecyclerView

ExpandableView

The transition is well described on habr but as for me this is not a suitable solution for deployment cards

The second option is to package the LinearLayout with android: animateLayoutChanges = "true" in the CardView

& lt; android.support.v7.widget.CardView
  xmlns: android = "http://schemas.android.com/apk/res/android"
  xmlns: tools = "http://schemas.android.com/tools"
  android: layout_width = "match_parent"
  android: layout_height = "wrap_content" & gt;
  & lt; LinearLayout
    android: layout_width = "match_parent"
    android: layout_height = "wrap_content"
    android: animateLayoutChanges = "true"
    android: padding = "16dp"
    android: orientation = "vertical" & gt;
    & lt; TextView
      android: id = "@ + id / block1"
      android: layout_width = "wrap_content"
      android: layout_height = "wrap_content"
      android: text = "Hello World!" / & gt;
    & lt; TextView
      android: id = "@ + id / block2"
      android: layout_width = "wrap_content"
      android: layout_height = "wrap_content"
      android: text = "Hello World!"
      android: visibility = "gone" / & gt;
  & lt; / LinearLayout & gt;
& lt; /android.support.v7.widget.CardView>

and on click show / hide block2

The harder option is to draw your own resize animation as shown here


Answer 2, authority 100%

As I wrote in the comment, to do this, you can create two CardView in the item, if it’s a drop-down list (if not, it’s even easier). Change visibility by clicking, and attach animations using MaterialContainerTransform .

Here’s a working example:

Activity :

class ExpActivity: AppCompatActivity () {
override fun onCreate (savedInstanceState: Bundle?) {
  super.onCreate (savedInstanceState)
  setContentView (R.layout.activity_exp)
  exp_recycler.setHasFixedSize (true)
  exp_recycler.adapter = ExpAdapter (getItems ()) {startView, endView,
  rootLayout - & gt;
    beginDelayedTransition (rootLayout, startView.getTransform (endView))
  }
}
private fun getItems () = listOf (
  Item (1, "Title1", getString (R.string.dummy_text)),
  Item (2, "Title2", getString (R.string.dummy_text)),
  Item (3, "Title3", getString (R.string.dummy_text)),
  Item (4, "Title4", getString (R.string.dummy_text))
)
private fun View.getTransform (mEndView: View) =
MaterialContainerTransform (). Apply {
  startView = this @ getTransform
  endView = mEndView
  addTarget (mEndView)
  pathMotion = MaterialArcMotion ()
  duration = 550
  scrimColor = Color.TRANSPARENT
}
}

Adapter :

class ExpAdapter (
private val items: List & lt; Item & gt ;,
private val clickListener: (View, View, ConstraintLayout) - & gt; Unit
): RecyclerView.Adapter & lt; ExpAdapter.ExpViewHolder & gt; () { 
Override Fun OnCreateViewholder (Parent: ViewGroup, ViewType: Int) =
ExpViewholder (
  Layoutinflater.from (parent.context) .inflate (R.Layout.Item_Exp, Parent, False)
)
Override Fun OnbindviewHolder (Holder: EXPVIEWHOLDER, POSITION: INT) {
  Val Item = Items [Position]
  With (Holder) {
    shorttext.text = item.shorttext
    LongText.Text = Item.longText
    Shortcard.SetonClickListener {
      Clicklistener (Shortcard, Longcard, RootLayout)
      Shortcard.Visibility = Gone.
      LongCard.Visibility = Visible
    }
    LongCard.SetonClicklistener {
      Clicklistener (Longcard, Shortcard, RootLayout)
      LongCard.Visibility = Gone.
      Shortcard.visibility = visible
    }
  }
}
Override Fun GetItemcount () = items.size
Class ExpViewholder (View: View): Recyclerview.viewHolder (View) {
  VAL ROOTLAYOUT: constraintlayout = view.root_layout
  Val Shorttext: TextView = view.Short_Text
  Val Longtext: TextView = view.long_Text
  Val Shortcard: CardView = view.Short_Card
  Val Longcard: CardView = view.long_card
}
}

Ameta layout:

& lt; xml version = "1.0" encoding = "UTF-8"? & gt;
& lt; androidx.constraintlayout.widget.constraintlayout
XMLNS: Android = "http://schemas.android.com/apk/res/android"
XMLNS: App = "http://schemas.android.com/apk/res-auto"
XMLNS: Tools = "http://schemas.android.com/tools"
Android: id = "@ + ID / ROOT_LAYOUT"
Android: layout_width = "Match_Parent"
Android: layout_height = "wrap_content" & gt;
& lt; androidx.cardview.widget.CardView
  Android: id = "@ + id / short_card"
  Android: layout_width = "Match_Parent"
  Android: layout_height = "wrap_content"
  Android: layout_margin = "8dp"
  App: layout_constraintend_toendof = "parent"
  App: layout_constraintstart_tostartof = "parent"
  app: layout_constrainttop_totopof = "parent" & gt;
  & lt; TextView
    Android: id = "@ + id / short_text"
    Android: layout_width = "Match_Parent"
    Android: layout_height = "wrap_content"
    Android: layout_margin = "8dp"
    Android: Gravity = "Center"
    Android: TextSize = "18SP"
    Tools: text = "@ String / Heading_Text" / & gt;
& lt; /androidx.cardview.widget.cardView>
& lt; androidx.cardview.widget.CardView
  Android: id = "@ + id / long_card"
  Android: layout_width = "Match_Parent"
  Android: layout_height = "wrap_content"
  Android: layout_margin = "8dp"
  Android: Visibility = "Gone"
  App: layout_constraintend_toendof = "parent"
  App: layout_constraintstart_tostartof = "parent"
  app: layout_constrainttop_totopof = "parent" & gt;
  & lt; TextView
    Android: ID = "@ + ID / LONG_TEXT"
    Android: layout_width = "Match_Parent"
    Android: layout_height = "wrap_content"
    Android: layout_margin = "16dp"
    Android: Gravity = "Center"
    Android: TextSize = "18SP"
    Tools: text = "@ string / dummy_text" / & gt;
& lt; /androidx.cardview.widget.cardView>
& lt; /androidx.constraintlayout.widget.constraintlayout>

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions