Creating Frame by Frame Animations in Android

A frame animation created by moving an object little-by-little over several consecutive frames. In Android, we can create Frame Animation by swapping frames repeatedly, so that it appears continuous to the human eye and we feel that it is animated.

Frame is referred to an image. So to implement frame by frame animation in android, we needs to have set of images, which describes a motion. Now let’s move on and see how to implement frame by frame animation in Android

The following steps will guide you through step by step approach to create frame animation in Android.

1. Identifying the Image Frames

First step towards creating frame animation is to prepare a series of images with the individual frames of your animation. Add the images to your project’s drawable folder. In this example, I have used the following sequence of images.

2. Define Animation Sequence

Declare a XML file that defines the animation sequence that holds the list of drawables. Create a new file named  frame_animation_list.xml  and paste it to your project resource res/anim or res/drawable folder.

<?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/frame1" android:duration="210" />
	<item android:drawable="@drawable/frame2" android:duration="210" />
	<item android:drawable="@drawable/frame3" android:duration="210" />
	<item android:drawable="@drawable/frame4" android:duration="210" />
	<item android:drawable="@drawable/frame5" android:duration="210" />
	<item android:drawable="@drawable/frame6" android:duration="210" />
	<item android:drawable="@drawable/frame7" android:duration="210" />
	<item android:drawable="@drawable/frame8" android:duration="210" />
	<item android:drawable="@drawable/frame9" android:duration="210" />
	<item android:drawable="@drawable/frame10" android:duration="210" />

</animation-list>

• Notice that in the above layout declaration, we are using AnimationDrawable class. This takes the list of Drawable resources and render them at specified intervals.
• Note that the AnimationDrawable class, loads all the images into memory before it starts animation.
• You must be careful about using this for images of larger size. Depending on the size of the images, you have to restrict the number of frames for making animation smoother.

3. Declare Activity Layout

Now declare an image view to your activity layout where the animation will be shown. In my example, I have declared an image view and two buttons Start and Stop to control the animation. Add the following snippet to your activity_main.xml file.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/start"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="Start" />

        <Button
            android:id="@+id/stop"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="Stop" />
    </LinearLayout>
</RelativeLayout>

4. Control the Animation Behaviour

Now that we are ready with the animation sequence, we need to add this Drawable as a background resource for our ImageView. Use the following code snippet to set the AnimationDrawable as the background of the ImageView.

// Setting animation_list.xml as the background of the image view
view.setBackgroundResource(R.drawable.frame_animation_list);

Once this is set, you can access this AnimationDrawable object by doing a get on the view object like this:

// Type casting the Animation drawable
frameAnimation = (AnimationDrawable) view.getBackground();

• Now we can control the behaviour of animation by using start() and stop() methods to start and stop the animation.
• You may use setOneShot() method runs the animation once and then stops.
• The addFrame(drawable, duration) method can be used to add a new frame by passing a Drawable object and sets its display duration.

5. Completing Example Code

Now that we understand the concepts, let us complete the example. Here is the complete code that goes inside MainActivity.java.

import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;

public class MainActivity extends ActionBarActivity implements OnClickListener {

    private ImageView view;
    private AnimationDrawable frameAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Type casting the Image View
        view = (ImageView) findViewById(R.id.imageView);

        // Setting animation_list.xml as the background of the image view
        view.setBackgroundResource(R.drawable.frame_animation_list);

        // Type casting the Animation drawable
        frameAnimation = (AnimationDrawable) view.getBackground();

        //set true if you want to animate only once
        frameAnimation.setOneShot(true);

        findViewById(R.id.start).setOnClickListener(this);
        findViewById(R.id.stop).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        if(id == R.id.start){
            frameAnimation.start();
        }else if(id==R.id.stop){
            frameAnimation.stop();
        }
    }
}