Android – How To Animate Drawable Graphics In Android ?

Hello Readers, CoolMonkTechie heartily welcomes you in this article (How To Animate Drawable Graphics In Android ?).

In this article, we will learn about how to animate drawable graphics in Android. In some situations, images need to be animated on screen. This is useful if :

• we want to display a custom loading animation comprising several images, or
• if one icon to morph into another after a user’s action.

Android provides a couple options for animating drawable as below :

• Animation Drawable – This allows us to specify several static drawable files that will display one at a time to create an animation.
• Animated Vector Drawable – This animates the properties of a vector drawable.

This article shows the animated images on screen in android using Drawable and Vector Drawable.

A famous quote about learning is :

” Live as if you were to die tomorrow. Learn as if you were to live forever. “

So let’s begin.

1. Animation Drawable

One way to animate Drawables is to load a series of Drawable resources one after another to create an animation. This is a traditional animation in the sense that it creates with a sequence of different images. It played in order, like a roll of film. The AnimationDrawable class is the basis for Drawable animations.

While we can define the frames of an animation in our code, using the AnimationDrawable class API, it’s more accomplished with a single XML file that lists the frames that compose the animation. The XML file for this kind of animation belongs in the res/drawable/ directory of our Android project. Here, the instructions are the order and duration for each frame of the animation.

The XML file comprises an <animation-list> element as the root node and a series of child <item> nodes that each define a frame: a drawable resource for the frame and the frame duration. Here’s an example XML file for a Drawable animation:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

This animation runs for just three frames. By setting the android:oneshot attribute of the list to true, it will cycle just once, then stop and hold on the last frame. The animation will loop if set false. With this XML saved as rocket_thrust.xml in the res/drawable/ directory of the project, it can be added as the background image to a View and then called to play.

Here’s an example Activity, in which the animation is added to an ImageView and then animated when the screen is touched:

private lateinit var rocketAnimation: AnimationDrawable

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

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

It’s important to note that the start() method called on the AnimationDrawable cannot be called during the onCreate() method of our Activity, because the AnimationDrawable does not fully attach to the window. If we want to play the animation immediately, without requiring interaction, then we might want to call it from the onStart()method in our Activity, which will get called when Android makes the view visible on screen.

2. Animated Vector Drawable

A vector drawable is a drawable that is scalable without getting Pixelated or blurry. The AnimatedVectorDrawable class (and AnimatedVectorDrawableCompat for backward-compatibility) lets us animate the properties of a vector drawable, such as rotating it or changing the path data to morph it into a different image.

We normally define animated vector drawables in three XML files:

• A vector drawable with the <vector> element in res/drawable/.
• An animated vector drawable with the <animated-vector> element in res/drawable/.
• One or more object animators with the <objectAnimator> element in res/animator/.

Animated vector drawables can animate the attributes of the <group> and <path> elements. The <group> elements defines a set of paths or subgroups, and the <path> element defines paths to be drawn.

When we define a vector drawable that we want to animate, use the android:name attribute to assign a unique name to groups and paths, so we can refer to them from our animator definitions.

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

The animated vector drawable definition refers to the groups and paths in the vector drawable by their names:

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

The animation definitions represent ObjectAnimator or AnimatorSet objects. The first animator in this example rotates the target group 360 degrees:

res/animator/rotation.xml

<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

For instance, the second animator morphs the vector drawable’s path from one shape to another. Both paths are compatible for morphing, because they must have the same number of commands and the same number of parameters for each command.

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

Here is the resulting AnimatedVectorDrawable:

That’s all about in this article.

Related Other Articles / Posts

• Android – The Most Popular Best Ways To Add Motion To UI

Conclusion

In this article, we understood about how to animate drawable graphics in Android. This article shows the animated images on screen in android using Drawable and Vector Drawable.

Thanks for reading! I hope you enjoyed and learned about drawable graphics concepts in Android. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe to the blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

You can find Other articles of CoolMonkTechie as below link :

• Android Articles
• CoolMonkTechie Home Page

You can also follow official website and tutorials of Android as below links :

• Android Developers

If you have any comments, questions, or think I missed something, leave them below in the comment box.

Thanks again Reading. HAPPY READING !!???