I remember my childhood days when I used to draw images of a man walking, on different pages of my book. I then used to flip across the pages which used to give me an illusion of a small video clip. It was my favorite passtime in those days.

I am sure most of us never knew that this technique was used to make movies and videos clip in earlier days. This is known as stop motion technique.

Stop motion is an animation technique to make a physically manipulated object appear to move on its own. The object is moved in small increments between individually photographed pictures, creating the illusion of movement when the series of pictures is played as a continuous sequence.

This kind of animation, know as FRAME ANIMATION can be easily implemented in Android apps. Now let’s quickly see how to implement frame animation in Android.

Step 1- Create a drawables folder.
Within this folder put all the image files you want to list as the frames of your animation.

Step 2- Create an activity_main.xml file.

[sourcecode language=”xml”]

<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"
tools:context=".MainActivity" >

<Button
android:id="@+id/animate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="16dp"
android:layout_marginLeft="32dp"
android:text="Animate" />

<Button
android:id="@+id/Stopanimate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/animate"
android:layout_alignBottom="@+id/animate"
android:layout_alignParentRight="true"
android:layout_marginRight="51dp"
android:text="Stop Animate" />

<ImageView
android:id="@+id/imageView1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_above="@+id/Stopanimate"
android:layout_centerHorizontal="true"
android:layout_marginBottom="171dp"
/>

</RelativeLayout>

[/sourcecode]

This xml file contains two buttons labelled as Animate and Stop Animate, and one ImageView. The two buttons will start and stop the frame animation and the animation of your frames will be displayed on the ImageView.

Step 3 – Create a Mainactivity.java file.

[sourcecode language=”Java”]

package com.example.frameanimation;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.BitmapDrawable;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView img = (ImageView)findViewById(R.id.imageView1);
Button animate =(Button)findViewById(R.id.animate);
Button Stopanimate =(Button)findViewById(R.id.Stopanimate);

BitmapDrawable frame1 = (BitmapDrawable)getResources().getDrawable(R.drawable.f1);
BitmapDrawable frame2 = (BitmapDrawable)getResources().getDrawable(R.drawable.f2);
BitmapDrawable frame3 = (BitmapDrawable)getResources().getDrawable(R.drawable.f3);
BitmapDrawable frame4 = (BitmapDrawable)getResources().getDrawable(R.drawable.f4);

int reasonableDuration = 100;
final AnimationDrawable mAnimation = new AnimationDrawable();

mAnimation.addFrame(frame1, reasonableDuration);
mAnimation.addFrame(frame2, reasonableDuration);
mAnimation.addFrame(frame3, reasonableDuration);
mAnimation.addFrame(frame4, reasonableDuration);
mAnimation.addFrame(frame3, reasonableDuration);
mAnimation.addFrame(frame2, reasonableDuration);

img.setBackgroundDrawable(mAnimation);

mAnimation.setOneShot(false);

animate.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
mAnimation.start();

}
});
Stopanimate.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
mAnimation.stop();

}
});

}

}

[/sourcecode]

Define all the frames as bitmapdrawables and assign the image files to the individual frames. Assign 100ms duration between successive images to give them an illusion of movement.

Define AnimationDrawable and add individual frames and the animation duration to it using addFrame method. Once you have added all the frames to the AnimationDrawable you can set it to the ImageView.

On click of start and stop animation buttons we will start and stop the frame animation. We are all set to go.