Tag: Android

What is AnimationDrawable?

AnimationDrawable is a built-in Android class (since API Level 1) used to create frame-by-frame animations with a list of Drawable objects as the source for each frame in the Drawable Animation.

While any Drawable resource can theoretically be used with AnimationDrawable, it’s most often used with raster images (e.g. png files) — which is what I’ll demonstrate in this walk-through.

What We’ll Build

In this walk through, I’ll build an appliation that shows an animation of a robot walking. This is a simple frame animation that has a little fun with the UI while demonstrating how frame animations can still look fluid. Here’s the completed UI

Note: this is an animated GIF; if using the Medium app on a mobile device, open this article in a browser to view the animation.

To make following along easier, the source code for the completed application can be downloaded from my github account here.

The AnimationDrawable Class

AimationDrawable was added in API version 1, so this is a technique that will work with virtually any Android application. Using AnimationDrawable is fairly simple. The overall process is as follows:

1. Create a Drawable resource in your application, which contains a list of item
2. Assign the Drawable in step 1 to the container element where it will appear — commonly this is the background of an ImageView.
3. Call the start method on the AnimationDrawable to begin the frame animation.

Note: a common mistake when using AnimationDrawable is to attempt to start the animation in the onCreate method — before the AnimationDrawable is fully attached to the Window. When this is done, typically the first frame is displayed, but the image doesn’t animate. The Android documentation provides the following warning:

“Note: Do not call this in the onCreate(Bundle) method of your activity, because the AnimationDrawable is not yet fully attached to the window. If you want to play the animation immediately without requiring interaction, then you might want to call it from the onWindowFocusChanged(boolean)method in your activity, which will get called when Android brings your window into focus.”

In the walk-through app, I’ll be calling start from a button press handler, which is also a perfectly safe way to approach this.

Creating the Drawable Resource

Creating the resource is fairly straightforward. For the RobotWalker application, a resource is added to the Drawable folder containing a single animation-list element, which in turn contains one item per animation frame.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">

    <item
        android:duration="100"
        android:drawable="@mipmap/robot_start_1"/>

    <item
        android:duration="100"
        android:drawable="@mipmap/robot_start_2"/>

    <item
        android:duration="100"
        android:drawable="@mipmap/robot_start_3"/>

[etc...the sample app has about 40 frames]
</animation-list>

Each item contains a drawable key that specifies a related Drawable object to use for that frame, and a duration (in milliseconds) for that frame to be displayed before the animation moves to the next frame.

The oneshot key at the animation-list level is true when the animation should be displayed once and then stop, or false if the animation should repeat from the first frame when it reaches the end.

Using the Drawable Resource in Kotlin

With the Drawable created in the res/drawable folder, all that’s left is to use the resource in your program.

Within main_activity.xml of the source project, I’ve added an ImageView(#1) and two Button objects: one to start the animation from the beginning (#2), and the other to stop animating (#3). The design view of the main activity is as follows:

Setting the AnimationDrawable as the background for the ImageView is the simplest and most common approach — which is what I’ve done here.

The final step is to add a listener for each button, and then to call the start and stop methods within the listeners.

The final Kotlin code is as follows:

package robkerr.com.robotwalker

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.graphics.drawable.AnimationDrawable
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        startWalking.setOnClickListener {
val bgImage = imageView.background as AnimationDrawable
            bgImage.start()
}

stopWalking.setOnClickListener {
val bgImage = imageView.background as AnimationDrawable
            bgImage.stop()
}
}
}

I hope this how-to was helpful, and gets you started using simple frame animation that works with any version of Android! If this was helpful, please tap the clap button and let me know!

To download the referenced project source, click on this link to my GitHub account.