Android SDK Quick Tip: Creating Frame Animations

In this Quick Tip article, we will run through the necessary steps required to implement a frame animation in an Android application.

Of the three types of animation you can implement in Android apps, frame animations, also known as drawable animations, are by far the simplest to code. Property and tween animations both require more code and setup, although with frame animations you do need to have a series of images prepared for the frames you want to display. Like tween animations, frame animation falls under the category of View animation, with the result displayed within a View in the app’s UI.

Unlike property and tween animations, with frame animations you do not need to prepare an animation resource, just a drawable resource in which the animation frames are listed together with duration and other details.

Prepare the Images

Frame animations display sequences of images one after another. If you already have a sequence of images comprising your animation, copy them into your application’s drawables folders, remembering to include them in the folder for each screen size you plan on supporting. You can alternatively create your own drawables in XML, such as shape drawables, to use within an animation. If so, create one shape drawable for each frame you want to appear within the animation, again making sure you have them all copied into each required drawable folder in your app’s resources directory. When giving your images filenames, consider including a numeric indicator of the order as in the code excerpts below.

In the source download folder, the animation uses ten frames of a rotating gyroscope sequence as JPEG images:

The result is very short, but is purely for demonstration.

Include an Image View in Your Layout

Open the layout file for your Activity and enter an Image View to hold the animation drawable, as in the following excerpt from the source download:

<ImageView
	android:id="@+id/gyro"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerInParent="true"
	android:contentDescription="@string/gyro"
	/>

Include an ID attribute so that you can set the animation to appear within the View in your Activity Java code. Choose ID and content description attributes as appropriate for your own animation. We don’t bother setting a source attribute in the layout XML as we will do this when instantiating the animation from the Activity code.

Create a Drawable Animation List

In your app’s drawables resource folder(s), create a new XML file to represent your frame animation. In the download the file is named “gyro_animation.xml”. Inside the new file, first enter an Animation List element as follows:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
	android:oneshot="false" >
</animation-list>

In the oneshot attribute, enter a value of “true” if you only want the animation to iterate once, or “false” if you want it to repeat. Inside the Animation List element add an item element for each frame image you want to appear:

<item
	android:drawable="@drawable/gyroscope1"
	android:duration="100"/>
<item
	android:drawable="@drawable/gyroscope2"
	android:duration="100"/>
<item
	android:drawable="@drawable/gyroscope3"
	android:duration="100"/>
<item
	android:drawable="@drawable/gyroscope4"
	android:duration="100"/>
<item
	android:drawable="@drawable/gyroscope5"
	android:duration="100"/>
<item
	android:drawable="@drawable/gyroscope6"
	android:duration="100"/>
<item
	android:drawable="@drawable/gyroscope7"
	android:duration="100"/>
<item
	android:drawable="@drawable/gyroscope8"
	android:duration="100"/>
<item
	android:drawable="@drawable/gyroscope9"
	android:duration="100"/>
<item
	android:drawable="@drawable/gyroscope10"
	android:duration="100"/>

The duration values are integers indicating how long each item should be displayed. Alter the duration attributes if you want each frame to appear for a different period of time. The items will appear in the order listed, so you can see why it helps if your image or drawable files have a numeric suffix indicating where each one sits in the running order. The image files in the download are named “gyroscope1.jpg”, “gyroscope2.jpg”, and so on.

Apply and Start the Animation

In your Activity class file, you can now apply and start the animation. Add the following import statements:

import android.graphics.drawable.AnimationDrawable;
import android.widget.ImageView;

Inside the onCreate method, get a reference to the Image View you included in your layout:

ImageView gyroView = (ImageView) findViewById(R.id.gyro);

Set the animation drawable you created as the background resource for the View:

gyroView.setBackgroundResource(R.drawable.gyro_animation);

Create an Animation Drawable object based on this background:

AnimationDrawable gyroAnimation = (AnimationDrawable) gyroView.getBackground();

Start the animation:

gyroAnimation.start();

The animation will start as soon as the Activity starts. If you want to start your animation on user interaction, simply place the start call inside an event listener method. Doing so would allow you to run the animation when the user touches a particular View item.

Conclusion

That’s all you need to include a frame animation in an Android app. This type of animation is of course only suited to cases where you either have the frame images already or are planning to implement them as drawables. For more detailed control over animations, look at either property or tween animation instead, both of which are a little more complex but achievable even for beginners. It goes without saying that in many cases an animation will not be intended as a standalone component, as in the source download example, but to enhance user interaction with UI items such as buttons.