When we want to create an item with continuious animation, we can use Android Frame animation. It will help us to create an animtion by showing a sequence of images in order. Its concept is similar with Sprite Sheet animation. But its frame images are saved in different png files. In this example, I will create flying flappy bird by Android Fram animation.

Android Frame By Frame Animation in XML

The flappy bird frame animation is made with 3 frame png images. I will define this frame animation in fly.xml by specifying the animation resources, sequence of images in order, aniamtion duration. In my example, each frame will play for 200 millseconds (0.2 second). Let’s see the animation XML source code here:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/f1" android:duration="200" />
    <item android:drawable="@drawable/f2" android:duration="200" />
    <item android:drawable="@drawable/f3" android:duration="200" />
</animation-list>

I put the above xml file in /res/drawable folder. In some eclipse project, there is no such folder. So you can create one drawable folder under /res folder. The following code will show you how to apply the frame animation on an ImageView and start the animation when users click on it.

		public View onCreateView(LayoutInflater inflater, ViewGroup container,
				Bundle savedInstanceState) {
			View rootView = inflater.inflate(R.layout.fragment_main, container,
					false);
			rootView.setOnClickListener(flyClickListener);
			
			bird = (ImageView) rootView.findViewById(R.id.birdimage);
			bird.setBackgroundResource(R.drawable.fly);
			flyAnimationDrawable = (AnimationDrawable) bird.getBackground();
			
			startButton = (ImageView) rootView.findViewById(R.id.startButton);
			return rootView;
		}
		
		private OnClickListener flyClickListener = new OnClickListener() {
			@Override
			public void onClick(View v) {
				if(startButton.getVisibility() == View.VISIBLE)
				{
					startButton.setVisibility(View.INVISIBLE);
				}
				
				flyAnimationDrawable.start();
			}
		};

In above source code, I apply the frame animation to an ImageView variable bird by setting as it background. I also set an click listener so that when users click on the startButton, I will start the frame animation.

Android Frame Animation Programmatically

Besides defined in fly.xml, we can also create frame animation by pure Java code. The following code will show you how to create Android Frame animation programmatically.

public View onCreateView(LayoutInflater inflater, ViewGroup container,
		Bundle savedInstanceState) {
	View rootView = inflater.inflate(R.layout.fragment_main, container,
			false);
	rootView.setOnClickListener(flyClickListener);
	
	bird = (ImageView) rootView.findViewById(R.id.birdimage);
	flyAnimationDrawable = new AnimationDrawable();
	flyAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.f1), 200);
	flyAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.f2), 200);
	flyAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.f3), 200);
	flyAnimationDrawable.setOneShot(false);
	bird.setBackground(flyAnimationDrawable);
	
	startButton = (ImageView) rootView.findViewById(R.id.startButton);
	return rootView;
}

Download And Try Example App On Android Device

You can install this android example app on your android device. Click following link to download the app or scan the QR code below to install this app directly on your android device.

Click here to download .apk file

What’s Next?

This is a simple example to show you how to create a frame by frame animation in Android. Next, I am going to integrate this frame by frame animation in my previous example, Flappy Bird Up And Down. So I can finish all flappy bird animations. Before that, I am facing one problem, how to control the frame by frame animation in Android?