Animation: Animating Views using ValueAnimator in Minutes — Android

Hello, in this tutorial, I will show you how to use the ValueAnimator to animate views.

Follow on Twitter: Codeible (@codeible) / Twitter.

ValueAnimator

ValueAnimator (Android) Tutorial

The ValueAnimator is a timing engine that calculates the change between one value to another overtime.

We can utilize this change in value to modify our view’s values and create animations.

Setup

To begin, create a new project.

In the MainActivity’s layout file, make sure that the root is a ConstraintLayout. Then add a button and add the constraints to center it on the screen.

add a button

Defining the ValueAnimator

Go to the MainActivity file and declare a ValueAnimator.

ValueAnimator valueAnimator;

In the onCreate() method grab the ValueAnimator object and use the ofInt() method from ValueAnimator to create the object.

Inside the parenthesis, pass in the starting value for the engine and then use a comma to add the ending value.

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.value_animator);
   valueAnimator = ValueAnimator.ofInt(0, 100);
}

When the engine starts, it will start from 0 and gradually increase to 100.

To set the duration, grab the valueAnimator object and call setDuration().

It accepts the duration in milliseconds. We’ll use 2000 to represent 2 seconds.

valueAnimator.setDuration(2000);

For the next part, we need to add a listener to the animator object to listen the changes. This way, we’ll be able to modify the button’s position overtime.

Grab the ValueAnimator, call addUpdatedListener(), and pass in a new AnimatorUpdatedListener.

To get the value of the changes, grab the animation object and call getAnimatedValue(). Then create an integer variable to store it.

public void onAnimationUpdate(ValueAnimator animation) {
   int value = (int) animation.getAnimatedValue();
}

It is an integer because we used the ofInt() method when we created the ValueAnimator object.

We can see the other methods we can use if we take the ValueAnimator class, put a period at the end of it, and type ”of.”

ValueAnimator of

Animating

Now that the animator engine is completed, create a reference to the button in the layout.

Button button = findViewById(R.id.button);

To begin moving the button, go to the onAnimationUpdate() callback, grab the button, call setTranslationX(), and pass in the value from the engine.

This will move the button in the x from left to right because our engine will start from 0 and end at 100.

To start the animation, attach a click listener to the button.

button.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
   }
});

Grab the value animator object and call start.

public void onClick(View v) {
   valueAnimator.start();
}

If we run the app and click on the button, it’ll move the button.

demo1

Complex Animations

For more complex animations, we can pass in multiple values in the creator method such as ofInt().

Replace the values with this set of numbers. This will create a simple shake animation.

ValueAnimator.ofInt(0, 20, -20, 18, -18, 15, -15, 6, -6, 0);

Run the app and click on the button.

shake animation

You can see that the ValueAnimator engine can be really powerful. Not only that it can change the value of one property, it can change the value of multiple properties at once.

If we run the app and click on the button now, it’ll change the position and the width.

Applying Interpolators

Now let’s take a look at interpolators. If we take a look at the documentation for ValueAnimator, the default interpolation it uses is the AccelerateDecelerateInterpolator.

With this interpolator, our values will gradually change and increase overtime. Then it’ll slowly decrease as it approaches the end.

Other types of interpolators can be found in the official Interpolator documentation.

If we click on the BounceInterpolator, it says that the “change bounces at the end.”

Let’s see how we can apply this interpolator and change the behavior of our animation.

In the onCreate() method right after we set the duration, grab the ValueAnimator object, call setInterpolator(), and pass in a BounceInterpolator object.

valueAnimator.setInterpolator(
   new BounceInterpolator()
);

Run the app and click on the button to see the change.

demo4

That is all for this tutorial. If you find this helpful, please give it a like, share, and subscribe.

Additional Resources:

ValueAnimator

Codeible.com