Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Adding a Simple Raster Animation

Author: Daniel Fowler -- Published? true -- FormatLanguage: W

Problem:

There is a need to add an animated image to a screen.

Solution:

Android has good support for user interface animation; it is easy to sequence images using the AnimationDrawable class.

Discussion:

To achieve the animation first images to be sequenced are generated using a graphics program. Each image represents one frame of the animation, they will usually be the same size with changes between each frame as required.

This animation recipe will sequence some traffic light images. The images can be generated using the open source vector graphics program Inkscape (see http://inkscape.org). A copy of the image used is available from the Open Clip Art Library (http://www.openclipart.org/), searching for Traffic Lights Turned Off, select the image, click on the View Image button and save the file from your browser. Open the file in Inkscape.

Four images will make up the animation, they will show the sequence of traffic lights as used in the United Kingdom, red, red and yellow, green, yellow and back to red. The SVG image has all the lights available, they are just hidden behind a translucent circle. To generate the first image select the circle covering the red light and delete it. Then from the Edit menu use Select All to highlight the whole image. Using the File menu select Export Bitmap. In the Export Bitmap dialog under Bitmap size enter 150 in the Height box, choose a directory and file name for the file to be generated, e.g. red.png. Click the Export button to export the bitmap. Delete the circle covering the yellow light, select all again and export as before to a file, e.g. red_yellow.png. Use the Edit menu and choose Undo (twice) to cover the red light and yellow light and then delete the circle covering the green light. Export to green.png. Again use undo to cover the green light and delete the circle covering the yellow light. Export the bitmap to yellow.png.

Four files are now ready for the animation.

Start an Android project. Copy the four generated files into the res/drawable directory. An animation-list needs to be defined in the same directory. Create a new file in res/drawable called uktrafficlights.xml. In this new file add the following.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/red" android:duration="2000" />
    <item android:drawable="@drawable/red_yellow" android:duration="2000" />
    <item android:drawable="@drawable/green" android:duration="2000" />
    <item android:drawable="@drawable/yellow" android:duration="2000" />
</animation-list>

This lists the images to be animated in the order of the animation and how long each one needs to be displayed (in milliseconds). If the animation needs to stop after running through the images then the attribute android:oneshot is set to true.

In the layout file for the program a ImageView is added whose source is given as @drawable/uktrafficlights (i.e. pointing to the created file).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView android:id="@+id/imageView1" 
        android:src="@drawable/uktrafficlights"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
</LinearLayout>

In the Activity class an AnimationDrawable (the Android class that performs the animation) is declared. In onCreate it is assigned to the drawable that the ImageView uses. Finally the animation is started by calling the AnimationDrawable start() method (there is a stop() method available to end the animation if required). The start method is called in onWindowFocusChanged to ensure everything has loaded before the animation starts (if could easily have been started with a Button or other type of input).

public class main extends Activity {
    AnimationDrawable lightsAnimation;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView lights = (ImageView) findViewById(R.id.imageView1);
        lightsAnimation=(AnimationDrawable) lights.getDrawable();
    }
    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
    	super.onWindowFocusChanged(hasFocus);
        lightsAnimation.start();
    }
}

Image animations can be useful to add interest to screens and can be used in games or cartoons.

See Also:

http://inkscape.org

http://www.openclipart.org

Download:

The source code for this project can be downloaded from http://tekeye.biz/download/trafficlights.zip.
No records found.