Sliding Up And Down: View Animation

3 min readOct 18, 2018

In Android, there are many ways to create an animation. From transitioning activities with animation to showing and hiding views, you get many choices when creating animations. You can useanimation drawables, create custom translations using Animation java class, there are ObjectAnimators and ValueAnimators too and simply there is the animate() method for every view available, why not just use that. But creating an efficient SlideUp and slideDown animation is always been a problem for many developers. To create Slide up/down animation you can go for translating views from some negative top margin to zero top margins or if it is a SlideUp The animation than from a positive bottom margin to zero bottom margin. But the animation effect can only be achieved for the views which have either device’s width or height. And if your views are like in the middle of another parent's view or just take a small part of your width screen then creating these animations using Drawable animation or using animate() method becomes really tricky and the end results are not that good.

In API 11, Android released Value Animator which can help you tackle these types of animation problems. You can change a view’s any property using the value animator and create seamless animations. And for sliding up and sliding down animation the value we can tweak is height. I have tried changing views x and y parameters but those are of no good when creating these animations. We will increase and decrease the height in a few lines of code to achieve an android view’s sliding up/down animation and the end result is going to be a smooth animation which gives the sense that view is opening instead of scaling or translating for some anchor point.

Below is the code to animate any passed view.

It is easily understandable code, there are only two methods with animation update listener. And after completing the animation we are setting view’s height to WRAP_CONTENT and visibility to GONE respectively to avoid errors.

Note: You can easily enhance the code by adding the width parameter to accurately calculate the height. Also, you can various interpolators to the value animator. Also, let me know in the comments if there is any error you face while implementing this.