Creating Frame Animations in Android

This example explains step by step process to create Frame Animations in Android. An 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 this using frame animation.

Steps:

1) Prepare a series of PNG images with the individual frames of your animation. Add the PNG images to your project’s drawable folder.

2) Prepare an frame_animation_list.xml for animation. This will go into the anim or drawable folder of your project, and in our example the file is named frame_animation_list.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/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>

3) Create a layout file with an ImageView. This will show the animation

<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/imageAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true" />

</RelativeLayout>

4) Animate pragmatically

import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.widget.ImageView;

public class MainActivity extends Activity {

	private AnimationDrawable frameAnimation;
	private ImageView view;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

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

		// 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();
	}

	@Override
	public void onWindowFocusChanged(boolean hasFocus) {
		super.onWindowFocusChanged(hasFocus);
		if (hasFocus) {
			// Start animation when in Focus
			frameAnimation.start();
		} else {
			// stop animation when not in Focus
			frameAnimation.stop();
		}
	}
}

A blogger, bit of a tech freak and a software developer. Around 7+ years of experience in design, development and maintenance of Mobile applications. Follow him on Twitter, Google Plus or like our official Facebook page