[Android] Using Frame Animation to Recreate the Flashing Arrow

Previously, I wrote about creating a simple animation of a flashing arrow using timers to hide and display a view at regular intervals (see A Simple Way To Make View Flash on Top of Another View). Another way to do this is to use Frame Animation, which is created by displaying a series of frames. Frame animation is actually covered in the Android Dev Guide, under View Animation. Here, using the same steps as described in the guide, the animation of the flashing arrow from the previous post is recreated.

First, we need to place the contents of each of the frames in a Drawable resource. This animation requires only two frames – one to show the arrow and another to completely hide it. The image for the first frame is easily taken from the example from last post. Using an image editor, the second frame is created from a copy of the first frame by completely erasing its contents. The resulting images can then be added as image resources.

With images in place, the Frame Animation, is defined in an frame animation resource XML file. The file is stored in the drawable resource (i.e. “res/drawable”) directory.

<?xml version="1.0" encoding="utf-8"?>
<!-- Definition for the animation of a flashing up arrow. -->
<animation-list 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/flashingArrow"
    android:oneshot="false">

    <!-- First frame - up arrow image for 1000 milliseconds 
        (1 second) -->
    <item 
        android:drawable="@drawable/uparrow" 
        android:duration="1000" />

    <!-- Second frame - an empty image for another 1000 milliseconds 
        (or 1 second) -->
    <item 
        android:drawable="@drawable/empty" 
        android:duration="1000" />
</animation-list>

The oneshot attribute in the <animation-list> tag is set to false so that the animation is repeated. If it was set to true, the animation would run only once. The <item> tags define each frame. Note that they refer to another image resource and that the duration are specified in milliseconds.

If the main layout is defined in an XML layout, the frame animation resource can referenced just like any other drawable resource. The main layout XML from the previous tutorial can be updated so that the ImageView holds the animation instead of the arrow image. With the animation was defined in a file called flashing.xml, the layout XML would now contain something like this:

...
<ImageView
    ... (attributes for the ImageView)
    android:src="@drawable/flashing">
</ImageView>
...

To start the animation in the Activity, get a hold of the AnimationDrawable from the ImageView and call the start. Use the stop method to stop the animation:

...
final AnimationDrawable animation = (AnimationDrawable) arrowView.getDrawable();

if (arrowView.getVisibility() != View.VISIBLE) {
    arrowView.setVisibility(View.VISIBLE);
}

if (animation.isRunning()) {
    animation.stop();
} else {
    animation.start();
}
...

The source code for my example can be downloaded from my GitHub repository.

Advertisements

One Response to [Android] Using Frame Animation to Recreate the Flashing Arrow

  1. nikpatel123k says:

    how can i get item resource from server not in drawable folder? you can reply me on this :: http://stackoverflow.com/questions/7266579/get-resource-from-server-for-animation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: