Java—Use ValueAnimator to scale a View to the size of another View

Java—Use ValueAnimator to scale a View to the size of another View … here is a solution to the problem.

Java—Use ValueAnimator to scale a View to the size of another View

I’m trying to use ValueAnimator to resize one View to fit the size of another. I use it instead of an animation because I need the View to be clickable afterward.

private Animator getHeightScaleAnimator(View target) {
    ConstraintLayout.LayoutParams thisParams = (ConstraintLayout.LayoutParams) getLayoutParams();
    ConstraintLayout.LayoutParams targetParams = (ConstraintLayout.LayoutParams) target.getLayoutParams();

int currentHeight = thisParams.height;
    int desiredHeight = targetParams.height;

ValueAnimator animator = ValueAnimator.ofInt(currentHeight, desiredHeight);
    animator.addUpdateListener(animation -> {
        int newInt = (int) animation.getAnimatedValue();
        thisParams.width = newInt;
        invalidate();
        requestLayout();
    });
    return animator;
}

The code above shows a method where I try to increase the height of the View to the desired View height, and I have the same method for the width, but using the width instead of the height.

The expected behavior is for the View to increase its size until it is as large as the target View, but for some strange reason, the View moves instead of resizing.

The implementation class is an extension of the ImageView, but the methods of the ImageView have not changed.


What can I do to animate the size of one View to another?

Solution

Just add the following method to your code.

private Animator getViewScaleAnimator(View from, final View target) {
         height resize animation
        AnimatorSet animatorSet = new AnimatorSet();
        int desiredHeight = from.getHeight();
        int currentHeight = target.getHeight();
        ValueAnimator heightAnimator = ValueAnimator.ofInt(currentHeight, desiredHeight);
        heightAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) target.getLayoutParams();
                params.height = (int) animation.getAnimatedValue();
                target.setLayoutParams(params);
            }
        });
        animatorSet.play(heightAnimator);

 width resize animation
        int desiredWidth = from.getWidth();
        int currentWidth = target.getWidth();
        ValueAnimator widthAnimator = ValueAnimator.ofInt(currentWidth, desiredWidth);
        widthAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) target.getLayoutParams();
                params.width = (int) animation.getAnimatedValue();
                target.setLayoutParams(params);
            }
        });
        animatorSet.play(widthAnimator);
        return animatorSet;
    }

and call it in any event. (e.g. click).

getViewScaleAnimator(fromView, targetView).setDuration(1000).start();

This is an output.

enter image description here

Related Problems and Solutions