ValueAnimator Example

Introduction to ValueAnimator in Android

ValueAnimator is one of the animation classes in Android that is used to animate the values of a target property over a specified duration. The animation is done by creating an instance of the ValueAnimator class and then setting the target property to animate. The ValueAnimator class provides many methods that allow you to customize the animation such as adding listeners, interpolating the values, and setting the duration of the animation.

Using ValueAnimator in Android

Creating a ValueAnimator Instance

To use the ValueAnimator class, you need to create an instance of it. The following code snippet shows how to create a ValueAnimator instance:

val valueAnimator = ValueAnimator.ofFloat(0f, 1f)

In this example, we created a ValueAnimator instance that animates a float value between 0 and 1.

Setting the Target Property

To animate a property, you need to set the target property that you want to animate. The following code snippet shows how to set the target property:

valueAnimator.addUpdateListener {
    val value = it.animatedValue as Float
    // Update the target property here
}

In this example, we added an update listener to the ValueAnimator instance that updates the target property with the animated value.

Starting the Animation

To start the animation, you need to call the start() method of the ValueAnimator instance. The following code snippet shows how to start the animation:

valueAnimator.start()

Customizing the Animation

The ValueAnimator class provides many methods that allow you to customize the animation. For example, you can set the duration of the animation, add listeners to the animation, and interpolate the values.

Setting the Duration

To set the duration of the animation, you need to call the setDuration() method of the ValueAnimator instance. The following code snippet shows how to set the duration of the animation to 1000ms:

valueAnimator.duration = 1000

Adding Listeners

To add listeners to the animation, you need to call the addListener() method of the ValueAnimator instance. The following code snippet shows how to add a listener to the animation:

valueAnimator.addListener(object : AnimatorListenerAdapter() {
    override fun onAnimationStart(animation: Animator?) {
        // Animation started
    }

    override fun onAnimationEnd(animation: Animator?) {
        // Animation ended
    }
})

In this example, we added a listener to the ValueAnimator instance that listens for the start and end events of the animation.

Interpolating the Values

To interpolate the values, you need to call the setInterpolator() method of the ValueAnimator instance. The following code snippet shows how to interpolate the values using an AccelerateDecelerateInterpolator:

valueAnimator.interpolator = AccelerateDecelerateInterpolator()

In this example, we set the interpolator of the ValueAnimator instance to an AccelerateDecelerateInterpolator.

More Examples

This is a simple example where we use the ValueAnimator class to animate a simple TextView in Kotlin android.

Here is the demo we create:

Step 1: Create Project

Start by creating an empty Android Studio project.

Step 2: Dependencies

Because we are using Kotlin we will add the kotlin-stdlib dependency:

    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

We also add the AppCompat and `ConstraintLayout:

    implementation "androidx.appcompat:appcompat:$buildToolsVer"
    implementation "androidx.constraintlayout:constraintlayout:$constraintLayoutVersion"

Step 3: Design Layout

Design your MainActivity layout as follows by adding a button to initiate an animation and a textview:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.developers.valueanimator.MainActivity">

    <Button
        android:id="@+id/animate_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:layout_marginEnd="15dp"
        android:layout_marginStart="15dp"
        android:text="@string/start_animating_text" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Hello World!"
        android:textColor="@android:color/black"
        android:textSize="25sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>

Step 4: Write Code

In your MainActivity.kt add imports including the android.animation.ValueAnimator:

import android.animation.ValueAnimator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

Then extend the AppCompatActivity and define an instance field containing an end-value integer:

class MainActivity : AppCompatActivity() {

    private val endValue = 20

Override the onCreate():

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

Listen to our animation-button click:

        animate_button.setOnClickListener {

Initialize the ValueAnimator as follows:

            val valueAnimator = ValueAnimator.ofFloat(textView.textSize, endValue.toFloat())

Then set the duration of the ValueAnimator:

            valueAnimator.duration = 600

Then apply an update listener to the ValueAnimator:

            valueAnimator.addUpdateListener {

Obtain the animated value for example and show it:

                val animatedValue = it.animatedValue as Float
                println(animatedValue)
                textView.textSize = animatedValue
            }

Then start the ValueAnimator:

            valueAnimator.start()
        }
    }
}

Here is the full code:

MainActivity.kt

import android.animation.ValueAnimator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private val endValue = 20

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        animate_button.setOnClickListener {
            val valueAnimator = ValueAnimator.ofFloat(textView.textSize, endValue.toFloat())
            valueAnimator.duration = 600
            valueAnimator.addUpdateListener {
                val animatedValue = it.animatedValue as Float
                println(animatedValue)
                textView.textSize = animatedValue
            }
            valueAnimator.start()
        }
    }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number	Link
1.	Download Example
2.	Follow code author
3.	Code: Apache 2.0 License

Conclusion

In conclusion, ValueAnimator is a powerful animation class in Android that allows you to animate the values of a target property over a specified duration. The ValueAnimator class provides many methods that allow you to customize the animation such as adding listeners, interpolating the values, and setting the duration of the animation. By using the ValueAnimator class, you can create beautiful and engaging animations in your Android applications.