Introduction

Expand and collapse animations are common in Android for FAQs, filter panels, settings groups, and any screen where content should appear progressively instead of all at once. The implementation usually comes down to animating height or letting the transition framework animate a visibility change for you.

Animate Height with ValueAnimator

If you need tight control, measure the target height and animate the layout parameter between collapsed and expanded states.

1import android.animation.ValueAnimator
2import android.view.View
3import android.view.ViewGroup
4
5fun expand(view: View) {
6    view.measure(
7        View.MeasureSpec.makeMeasureSpec((view.parent as View).width, View.MeasureSpec.EXACTLY),
8        View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
9    )
10
11    val targetHeight = view.measuredHeight
12    view.layoutParams.height = 0
13    view.visibility = View.VISIBLE
14
15    ValueAnimator.ofInt(0, targetHeight).apply {
16        duration = 250
17        addUpdateListener { animator ->
18            view.layoutParams.height = animator.animatedValue as Int
19            view.requestLayout()
20        }
21        start()
22    }
23}
24
25fun collapse(view: View) {
26    val initialHeight = view.measuredHeight
27
28    ValueAnimator.ofInt(initialHeight, 0).apply {
29        duration = 250
30        addUpdateListener { animator ->
31            val value = animator.animatedValue as Int
32            view.layoutParams.height = value
33            view.requestLayout()
34            if (value == 0) {
35                view.visibility = View.GONE
36            }
37        }
38        start()
39    }
40}

This works well when you need a real sliding motion instead of a simple visibility toggle.

Use TransitionManager for Simpler Cases

If the animation does not need custom height logic, Android's transition framework can do much of the work for you.

1import android.transition.AutoTransition
2import android.transition.TransitionManager
3import android.view.View
4import android.view.ViewGroup
5
6fun toggleSection(container: ViewGroup, section: View) {
7    TransitionManager.beginDelayedTransition(container, AutoTransition())
8    section.visibility = if (section.visibility == View.VISIBLE) View.GONE else View.VISIBLE
9}

This is often enough for settings screens and simple expandable sections. The tradeoff is less precise control over the animation details.

Measure the Right Height

One of the trickiest parts of manual expand animation is measurement. If the view has not been measured yet, measuredHeight may be zero. That is why expansion code often forces a measure pass before the animation begins.

The exact measurement strategy can differ depending on parent layout constraints, but the principle is the same: do not animate toward an unknown height.

For content whose height changes frequently, you may want to recalculate the target height each time instead of caching it permanently.

Think About UX, Not Just Motion

An expand animation should reveal information, not slow users down. Keep durations short, and avoid animating many heavy nested layouts at once. If the content appears instantly but the height animates smoothly, the UI usually feels responsive without being flashy.

Also consider accessibility and state clarity. An expandable section often benefits from an indicator such as a chevron that changes direction, plus content descriptions that reflect whether the section is expanded or collapsed.

RecyclerView and Large Lists

If you are animating expandable rows inside a RecyclerView, state management becomes more important than the animation itself. Expansion state should live in your data or view-model layer, not only in recycled view instances. Otherwise rows can reopen or collapse unexpectedly while scrolling.

That is a common place where a correct animation function still leads to incorrect UI behavior.

Common Pitfalls

Animating to a height of zero because the view was never measured is a common implementation bug. Measure before animating.

Using expensive nested layouts can make expand and collapse animations stutter on lower-end devices. Keep the animated subtree lightweight.

Storing expansion state only in the view instead of in the backing data causes incorrect behavior in recycled lists.

Summary

• Use ValueAnimator when you need explicit height control.
• Use TransitionManager for simple visibility-based expand and collapse behavior.
• Measure the target view correctly before animating.
• Keep animation short and pair it with reliable state management, especially in lists.