The images are displayed in sequence, giving the illusion that the smoke cloud is getting bigger

Our tutorial app

The app starts with an image of a train on the screen. Touching the train, triggers our Frame animation, making it appear as if smoke is coming out of the train’s smoke stack.

Touching the train triggers the animation and smoke billows out of the train’s smoke stack, getting bigger as the animation progresses

Define your animation in an XML file

We define the Frame animation in XML and save the file, frame_animation.xml in the res/drawable folder:

We define our Drawable animation in an XML file

Note the following:

• - the required root element
• oneshot – set this attribute to true if you want the animation to run once only. Set it to false to loop the animation
• - define each of you drawables, or frames, within the tags
• drawable – the drawable resource to be used by this frame
• duration – the time in milliseconds that this frame should be displayed

Put your animation images in a drawable folder

Put your images to be used in the animation in the drawable folders. You need to include alternative images for the different screen sizes and densities. Have a look at the tutorial, Designing for multiple screens. Alternative image resources for more on this.

Put your drawables in the drawable folders. Don’t forget to include alternative images

Start your Animation in code

To start the animation:

• first get the image view that you want to animate and set it to use your animation drawable as its background
• then get the image view’s background and cast it to an AnimationDrawable object
• finally call start() to start the animation.

Get the ImageView that you want to animate and set its background to your animation drawable

Note the following:

• myFrameAnimationImageView – the reference to our image view that we want to animate
• setBackgroundResource – we set the background of the image view to our animation drawable
• myFrameAnimation – our AnimationDrawable object which we get by calling getBackground() and cast it to an AnimationDrawable object
• you can’t call start() in the activity’s onCreate() method to start the animation. If you want the animation to run when the activity starts, then call start() in the activity’s onWindowFocusChanged() method

One click does it all: Starting the animation using an onClick method

Touching the train image triggers the showAnimation() method where we include our code to start the animation:

Touching the train image triggers the onClick method, showAnimation() which starts the animation

Note the following:

• stop – we call stop() to stop the animation if it’s running. If the animation has been started, it will not start again, even if it appears to have stopped after completing the animation sequence. You need to call stop() before it can start again. Nothing happens if it’s not running and you call stop()
• start – we call start() to start the animation

Have you seen our other Animation tutorials?

• Using View Animations in your apps: A tutorial
• A Property Animation tutorial

I hope that you have found this tutorial helpful.

This project was created using .

You can download the project files here 

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.