Advertisement
Android SDK

Android SDK Quick Tip: Creating Frame Animations

by

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:

Gyroscope Animation

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.

Related Posts
  • Code
    Android SDK
    Create a Hangman Game: User InterfaceAndroid hangman game preview retina
    In this series, we are creating a Hangman game for the Android platform. In the first tutorial, we set the application up to present two screens to the user and we also made a start with the user interface elements, the images and shape drawables to be precise. In the second tutorial, we will zoom in on the game's layout.Read More…
  • Code
    Android SDK
    Create a Hangman Game: Project SetupAndroid hangman game preview retina
    In this series, I will show you how to create a simple Hangman game for Android. In every tutorial, you'll learn a number of fundamental skills for creating Android applications. The application will consist of two screens, include user interaction involving adapters, contain dialogs and an action bar, and leverage XML for data storage. Let's get started.Read More…
  • Code
    Android SDK
    Android SDK: App ResourcesAndroid preview@2x
    We are learning how to develop Android apps in this series. So far, we've looked at the structure of an Android app and explored user interfaces. In this tutorial, we will learn to work with the project resources.Read More…
  • Code
    Android SDK
    Android SDK: Create an Arithmetic Game - Setup and Interface CreationMath game preview@2x
    The Android platform provides the ability to facilitate interaction, to carry out computation, and to save data. To explore some of these basic features with a practical focus, this series will create a simple arithmetic game for the Android platform. The series will involve creating user interface elements and layouts, four Activity classes, and one helper class. The gameplay logic will be relatively complex if you do not have much Java experience, but you will learn to use various Java control structures along the way! Read More…
  • Code
    Android SDK
    Android SDK: Creating a Simple Property AnimationProperty animation motion background preview
    With Android you can include various types of animation in your apps. In this tutorial we will create a basic property animation using Android's Object Animator and Value Animator classes. The result will be simple but the techniques involved will apply in more complex animated effects. We will create an animation in which a steering wheel turns and the background scene moves accordingly.Read More…
  • Code
    Android SDK
    Android SDK: Creating a Simple Tween AnimationAndroid sdk sue smith tween preview
    The Android platform facilitates three different types of animation you can define in your application resources: property, tween and frame. In this tutorial, we will create a simple tween animation using shape drawables displayed within Image Views.Read More…