Android property animation: how to increase view height?

Question

How to increase the view height using Property Animations in Android?

ObjectAnimator a = ObjectAnimator.ofFloat(viewToIncreaseHeight, "translationY", -100);
a.setInterpolator(new AccelerateDecelerateInterpolator());
a.setDuration(1000);
a.start();

The translationY actually moves the view not increase the height. How can I increase the height of the view?

Miscellanea

Answer 1

ValueAnimator anim = ValueAnimator.ofInt(viewToIncreaseHeight.getMeasuredHeight(), -100);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        int val = (Integer) valueAnimator.getAnimatedValue();
        ViewGroup.LayoutParams layoutParams = viewToIncreaseHeight.getLayoutParams();
        layoutParams.height = val;
        viewToIncreaseHeight.setLayoutParams(layoutParams);
    }
});
anim.setDuration(DURATION);
anim.start(); 

Drexler

scale increases the height both ways. i want to increase the height to one direction. – Miscellanea

use ValueAnimator instead – Drexler

yes, thats what I just did before your answer :-p, but i'll accept it. thanks – Miscellanea

and who is the viewGroup, from which view are you getting it from? – Yankeeism

Very slow method as changing the view will be calculated at each frame. – Plot

can we change the pivot? – Badillo

why start from measuredHeight? actual height would make more sense to me. measuredHeight could be significantly bigger, in which case, the part animating from measuredHeight to height would be doing nothing. – Tankoos

Best solution! Thank you – Lavonna

Hello @g.revolution, could you please share me your code what increase the height to one direction. I did try the above code but it's changing both ways. Thank in advance! – Joinville

Answer 2

You can use ViewPropertyAnimator, which can save you some lines of code :

yourView.animate()
   .scaleY(-100f)
   .setInterpolator(new AccelerateDecelerateInterpolator())
   .setDuration(1000);

that should be all you need, be sure to check the documentation and all available methods for ViewPropertyAnimator.

Laurentia

Don't forget the closing brackets on that AccelerateDecelerateInterpolator instance creation – Porthole

scale will grow the view in both directions, and stretch its child views (if it has any). The OP wants to animate the height of the view only. – Pontius

@Pontius you can simply change the pivot of the view -> android:transformPivotY="0dp" – Eventempered

Answer 3

This is not a direct answer to this question. However, it may help someone.

Sometimes, we want to increase/decrease view's height because some of its child is is being added/removed (or just becoming visible/gone).

On those cases, you really can use Android default animation. As mentioned in other answers, you can set via:

<LinearLayout
    ...
    android:animateLayoutChanges="true"
.../>

Or in Java:

linearLayout.setLayoutTransition(new LayoutTransition());

If you created a custom view:

public StickerPickerView(final Context context, final AttributeSet attrs,
        final int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    setLayoutTransition(new LayoutTransition());
}

For me, it was pretty satisfactory but I just tested on latest APIs. That will automatically add a fade in/out when your view becomes visible. It will also animate the height/width of your view when same changes (like when you change the visibility of one of the child views etc).

So, I recommend to at least give a try.

Morceau

This is exactly what I was searching for! Sadly, doesn't work on smooth animating recycler view when adding / removing items. Throws exception: Providing a LayoutTransition into RecyclerView is not supported. Please use setItemAnimator() – Pundit

if android:animateLayoutChanges="true" didn't work in nested views, then you need to add linearlayout.layoutTransition.enableTransitionType(LayoutTransition.CHANGING) to the parent layout which will be resized. – Conscription

Answer 4

Use this method in kotlin:

private fun increaseViewSize(view: View) {
    val valueAnimator = ValueAnimator.ofInt(view.measuredHeight, view.measuredHeight+20)
    valueAnimator.duration = 500L
    valueAnimator.addUpdateListener {
        val animatedValue = valueAnimator.animatedValue as Int
        val layoutParams = view.layoutParams
        layoutParams.height = animatedValue
        view.layoutParams = layoutParams
    }
    valueAnimator.start()
}

Lail

Answer 5

fun View.animateHeightFromTo(initialHeight: Int, finalHeight: Int) {
    val animator = ValueAnimator.ofInt(initialHeight, finalHeight)
    animator.duration = 250
    animator.addUpdateListener {
        val value = it.animatedValue as Int
        val lp = this.layoutParams
        lp.height = value
        this.layoutParams = lp
        isVisible = value != 0
    }
    animator.start()
}

The visibility setting was convenient for me but you may not want that

Tankoos

Answer 6

For kotlin you can use this method

private fun increaseViewSize(view: View, increaseValue: Int) {
    val valueAnimator =
        ValueAnimator.ofInt(view.measuredHeight, view.measuredHeight + increaseValue)
    valueAnimator.duration = 500L
    valueAnimator.addUpdateListener {
        val animatedValue = valueAnimator.animatedValue as Int
        val layoutParams = view.layoutParams
        layoutParams.height = animatedValue
        view.layoutParams = layoutParams
    }
    valueAnimator.start()
}

It will increase view's size as defined in parameter

based on @Minion answer

Bachman

Answer 7

Here is my code to animate scrolling an item to center of the screen inside a recycleView

// Scrolling with animation
val valueAnimator = ValueAnimator.ofInt(getWidth() / 2)
valueAnimator.duration = 250L
valueAnimator.addUpdateListener {
    val animatedValue = valueAnimator.animatedValue as Int
    (layoutManager as LinearLayoutManager).scrollToPositionWithOffset(itemToScroll, animatedValue)
}
valueAnimator.start()
// End of scrolling with animation

Note it is a bit similar to UIView.animate in Swift, but with more complication

Unqualified

Answer 8

It's pretty straight forward as you can see below.

<LinearLayout android:id="@+id/container"
android:animateLayoutChanges="true"
.../>

More info below:

https://developer.android.com/training/animation/layout

Sirocco

In order for this to work you would have to add the view to the layout. – Narvik

This solution animates the view's children, not the view itself. – Abirritate