I saw how many people use CardView, as an example:
Closed
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
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>