Introduction

A slide animation is a good way to reveal or dismiss a panel without making the interface feel abrupt. The key is not only moving the view visually, but also managing its visibility and layout state so the rest of the UI behaves correctly before and after the animation. On Android, a practical implementation usually uses translationY with a small helper method.

Animate Position, Not Layout Parameters

A common mistake is trying to resize or relayout the entire view hierarchy for a simple slide effect. For many UI cases, it is easier to animate the view's vertical translation.

Showing a panel usually means:

• make the view visible
• start it slightly off-screen or above its resting position
• animate translationY back to 0f

Hiding is the reverse:

• animate translationY away from the resting position
• set the final visibility when the animation ends

This keeps the code easier to reason about than directly manipulating layout params for every frame.

A Simple Kotlin Helper

Here is a reusable Android example:

1import android.view.View
2
3fun View.slideDown(duration: Long = 200) {
4    if (visibility == View.VISIBLE) return
5
6    post {
7        translationY = -height.toFloat()
8        alpha = 0f
9        visibility = View.VISIBLE
10
11        animate()
12            .translationY(0f)
13            .alpha(1f)
14            .setDuration(duration)
15            .start()
16    }
17}
18
19fun View.slideUp(duration: Long = 200) {
20    if (visibility != View.VISIBLE) return
21
22    animate()
23        .translationY(-height.toFloat())
24        .alpha(0f)
25        .setDuration(duration)
26        .withEndAction {
27            visibility = View.GONE
28            translationY = 0f
29            alpha = 1f
30        }
31        .start()
32}

This implementation waits until the view has a measured height, then animates it vertically.

Use It from an Activity or Fragment

A minimal usage pattern looks like this:

1binding.showButton.setOnClickListener {
2    binding.panel.slideDown()
3}
4
5binding.hideButton.setOnClickListener {
6    binding.panel.slideUp()
7}

That is enough for toolbars, filter panels, small banners, or expandable sections where the visual effect should be obvious but lightweight.

Why GONE Versus INVISIBLE Matters

If the view should stop taking layout space after it hides, use View.GONE. If it should remain in the layout but not be visible, use View.INVISIBLE.

For most slide-out panels, GONE is the better choice because the hidden panel should no longer affect surrounding layout.

That is why the example sets visibility = View.GONE after the hide animation completes.

Measure Before You Animate

Another easy mistake is trying to animate the view before it has been measured. If height is still zero, the translation distance is wrong and the slide effect either looks broken or does nothing.

Using post { ... } is a simple way to defer the show animation until the view has layout information:

panel.post {
    panel.slideDown()
}

If your animation depends on the real measured size, always make sure the view has been laid out first.

XML Animation Files Versus Property Animation

Android also supports XML animation resources, but ViewPropertyAnimator is often easier for this specific effect because it keeps the visibility change and end-state logic close to the code that uses it.

XML animation can still be fine when:

• the same motion is reused heavily
• the team prefers declarative animation resources
• you need consistency with an existing animation system

For small show-hide helpers, though, property animation is usually simpler.

Keep the UI State Consistent

A slide effect should not leave the view half visible, clickable while hidden, or translated after the animation ends. That is why the helper resets translationY and alpha after hiding.

Animations are easy to make visually plausible but logically inconsistent. Always think about the final UI state, not just the movement itself.

Common Pitfalls

One common mistake is animating the view out and forgetting to change its visibility at the end. The view looks hidden but still occupies space or intercepts touches.

Another mistake is reading height before the view has been measured. That results in zero-distance animations that do not actually slide.

Developers also sometimes animate layout params when a simple translationY animation would be easier and smoother.

Finally, always reset translation and alpha after hiding. If you do not, the next show animation may start from a stale state and behave unpredictably.

Summary

• A slide show-hide effect is usually easiest with translationY and alpha.
• Make the view visible before showing and set it to GONE or INVISIBLE after hiding.
• Wait until the view has been measured before using its height in the animation.
• Keep final UI state consistent, not just the motion effect.
• For many Android screens, small Kotlin helpers are cleaner than more complex layout-based animation logic.