How to Create an Expansible CardView
Create a Card with Main View
Let’s create a CardView that would contain basic details. We should also add an arrow icon that would show if the card is expanded or not.
Add Details View in the Card
As we have created the card with the main view now let’s add a details view whose visibility would be toggled when we click on the main view of the card. I have added the details view below the main view as shown in the picture below.
The details view here only contains one TextView.
Kotlin Code
Now in our Kotlin code, first of all, we should reference our views. Then with the click of the main view, we should toggle the visibility of the details view.
Here you can see that, inside the setOnClickListener { … } I have checked whether the details view is visible or not and then according to its visible state I have toggled its visibility state.
Now we should animate the arrow icon and details view when toggling visibility state.
Add Animation to the Arrow Icon
Let’s animate the arrow icon by rotating it. I have created a utility function named toggleArrow() for achieving it.
Add Animation to the Details View
We can also animate the details view by using the TransitionManager. For using TransitionManager we need to pass the parent ViewGroup which is our CardView here and then after beginning the transition we should toggle the visibility for showing the animation.
Final Result
Hope it helped you. Thank You!
