Animated Images in Android

Android has good support for user interface animation. Views can be animated and it is easy to sequence images using the AnimationDrawable class. This article will show a simple animation using a sequence of traffic light images. The first step is to generate the required images to be sequenced. Each image represents one frame of the animation, they will usually be the same size with changes between each frame as required. Here the images are 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, or Ctrl-A, 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 (click away from the image to remove the selection boxes, click the yellow and press Delete). Use Select All again and export as before to a file, e.g. red_yellow.png. Use the Edit menu and choose Undo, twice, restoring the covers for the red light and yellow light and then delete the circle covering the green light, as was done for yellow. Export to green.png. Again use undo to cover the green light then delete the circle covering the yellow light and export the bitmap in the same way as before to yellow.png.

Exporting an Image from Inkscape

Traffic LightsFour files are now ready for the animation. Start a new Android project in Eclipse using the File menu, select New then Android Project. Fill in the Project Name, here Lights is used. Click Next and select the build target from the installed APIs, any will do, for example Android 1.5. Click Next and enter the Package Name in the required format such as biz.tekeye.lights. Create Activity will be checked, set it to main. Copy the four generated files into the res/drawable project directory (drag and drop is supported, or if copied outside of Eclipse the Package Explorer will need refreshing from the File menu, or F5).

With the four image files added to the project an animation-list needs to be defined, also in the res/drawable directory. With the directory highlighted in the Package Explorer use the File menu, select New then Android XML File, call it uktrafficlights.xml and select animation-list as the Root Element, click Finish. Replace the contents of the new file with the following (see Copying Code from the Articles for tips) :

[code lang=”xml”]<?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>[/code]

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 an ImageView is added whose source is given as @drawable/uktrafficlights (i.e. pointing to the created file), the following can replace the contents of main.xml in the res/layout project folder.

[code lang=”xml”]<?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>[/code]

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). Replace the main class in the main.java file in the src tree with this class. The import statements for AnimationDrawable and ImageView will need to be added.

[code lang=”Java”]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();
}
}[/code]

UK Traffic Lights Signal AnimationImage animations can be useful to add interest to screens and can be used in games or cartoons. Download some code that covers this article ready for importing into an Android project. The code can also be accessed via the Android Example Projects page. See the article Move Android Code Between PCs Running Eclipse on how to import example code into an Eclipse project. A version of this article was produced for the Android Cookbook.

4 thoughts on “Animated Images in Android

  1. Pingback: Animating Image Sequences in Android « Team Yoda

  2. thanks for the great article… I applied this about a month ago.. but then client complained that its not working for gingerbread…. any ideas?

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.