ObjectAnimator
It provides support for animating properties on target objects. It can be used to animate Views.
Animations supported are rotation, translation, scale, and alpha.
Following example shows application of rotation animation to an ImageView imageview2.
1. Create rotation ObjectAnimator file (res/animator/rotate_anim.xml)
It is rotation animation from 0 degree to 360 degree in 3 seconds, at constant speed, repeating infinitely.
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="rotation"
android:duration="3000"
android:valueFrom="0"
android:valueTo="360"
android:interpolator="@android:interpolator/linear"
android:repeatCount="infinite" />
2. Apply animation to a View
In onCreate, create an Animator using rotate_anim.xml, set an ImageView as it’s target, and start the Animator. This will rotate the ImageView continuously.
Animator animator = AnimatorInflater.loadAnimator(this, R.animator.rotate_anim); animator.setTarget(binding.imageview2); animator.start();
AnimatedVectorDrawable
It’s a special XML drawable that ties together:
- A vector drawable (the static shape or icon)
- One or more object animators (that animate parts of that vector)
It can be used to animate:
- Path data (morph one shape into another)
- Stroke color or fill color
- Rotation / translation / scale / alpha of a group or path
- Trim path (to create “draw on” effects, like progress rings)
It typically uses three XML files:
- A Vector Drawable (in res/drawable/ folder)
- An Object Animator (in res/animator/ folder)
- An Animated Vector (in res/drawable/ folder)
Following code shows application of Rotation animation to vertical limb of a plus icon created using vector drawable.
1. Create a vector drawable plus.xml (res/drawable/plus.xml)
Note that the vertical line is placed in a group with name “rotationGroup”.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<!-- Horizontal line -->
<path
android:name="horizontal"
android:strokeColor="#909090"
android:strokeWidth="2"
android:strokeLineCap="round"
android:pathData="M6,12L18,12" />
<group
android:name="rotationGroup"
android:pivotX="12"
android:pivotY="12">
<!-- Vertical line -->
<path
android:name="vertical"
android:strokeColor="#909090"
android:strokeWidth="2"
android:strokeLineCap="round"
android:pathData="M12,6L12,18" />
</group>
</vector>
2. Create rotation ObjectAnimator file (res/animator/rotate_anim.xml)
It is rotation animation from 0 degree to 360 degree in 3 seconds, at constant speed, repeating infinitely.
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="rotation"
android:duration="3000"
android:valueFrom="0"
android:valueTo="360"
android:interpolator="@android:interpolator/linear"
android:repeatCount="infinite" />
3. Create an Animated Vector file (res/drawable/animated_image.xml)
This is an animated vector for the plus.xml drawable. It’s target is the group “rotationGroup” in plus.xml, and it applies the animation from rotate_anim.xml to the target.
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/plus">
<target
android:name="rotationGroup"
android:animation="@animator/rotate_anim" />
</animated-vector>
4. Use in Activity
Put following codes in onCreate.
- It loads the drawable (animated_image.xml, which is an Animated Vector) into the ImageView.
- Then retrieves the actual drawable object being displayed.
- Ensures it’s an animation-capable drawable.
- Then begins the animation.
// Set the image resource of imageview3 to a drawable (can be animated or static)
binding.imageview3.setImageResource(R.drawable.animated_image);
// Get the currently assigned drawable from imageview3
Drawable drawable = binding.imageview3.getDrawable();
// Check if the drawable supports animation (e.g. AnimatedVectorDrawable, AnimationDrawable, etc.)
if (drawable instanceof Animatable) {
// If it is animatable, start the animation
((Animatable) drawable).start();
}