Animation sample program in Android

By: Ashley Printer Friendly Format    


This sample android program shows you how to do simple animation in Android. In this program the xml file ani.xml is used to rotate the images in sequence. The images must be copied to the /res/drawable folder together with the ani.xml file.

The FrameAnimation1.java file is as follows:

package com.javasamples.ani;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.*;

public class FrameAnimation1 extends Activity {
	Button b;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		this.setupButton();
	}

	private void setupButton() {
		b = (Button) this.findViewById(R.id.startFAButtonId);
		b.setOnClickListener(new Button.OnClickListener() {
			public void onClick(View v) {
				parentButtonClicked(v);
			}
		});
	}

	private void parentButtonClicked(View v) {
		animate();
	}

	private void animate() {
		ImageView imgView = (ImageView) findViewById(R.id.animationImage);
		// imgView.setVisibility(ImageView.VISIBLE);
		imgView.setBackgroundResource(R.drawable.ani);

		AnimationDrawable frameAnimation = (AnimationDrawable) imgView
				.getBackground();

		if (frameAnimation.isRunning()) {
			frameAnimation.stop();
			b.setText("Start");
		} else {
			frameAnimation.start();
			b.setText("Stop");
		}
	}
}// eof-class

The output of this program will be as shown in the android emulator below.

The main.xml file in your res/layout folder is as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<TextView
		android:id="@+id/textViewId1"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:text="Animated Demo" />
	<Button
		android:id="@+id/startFAButtonId"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:text="Start Animation" />
	<ImageView
		android:id="@+id/animationImage"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content" />
</LinearLayout>

In addition to the main.xml, you need to create another xml file ani.xml with the following code in your res/drawable folder. In that same folder, you also need to copy your image files that you specifiy in the ani.xml

<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item
android:drawable="@drawable/icon"
android:duration="50" />
<item
android:drawable="@drawable/icon1"
android:duration="50" />
<item
android:drawable="@drawable/icon2"
android:duration="50" />
</animation-list>

                                        

Most Viewed Articles (in Android )

Latest Articles (in Android)

Comment on this tutorial

Subscribe to Tutorials

Related Tutorials

Archived Comments

1. I just copied this example to my app. It's not wor
View Tutorial          By: Praveen Kumar at 2011-11-17 12:59:40

2. It tried this app... It's working fine... really a
View Tutorial          By: Prakash at 2012-01-04 06:33:12

3. I just copied this example to my app. It's not wor
View Tutorial          By: jhansi at 2012-02-22 10:26:17

4. This is all the code that you need for creating dr
View Tutorial          By: subduedjoy at 2012-03-20 20:52:18

5. Animation code(very Similar to this) is not workin
View Tutorial          By: Rakesh Kumar at 2012-04-23 09:42:55

6. This is a simple app and its working good.......
View Tutorial          By: sathish at 2012-04-23 12:12:22

7. This is a simple app and its working good.......
View Tutorial          By: sathish at 2012-04-23 12:13:58

8. This is a simple app and its working good.......
View Tutorial          By: sathish at 2012-04-23 12:15:08

9. This is a simple app and its working good.......
View Tutorial          By: sathish at 2012-04-23 12:16:07

10. Change the line from
imgView.setBackgroundR

View Tutorial          By: laki at 2012-05-02 08:59:25

11. Thanks alot man! This is just what i needed!!!
View Tutorial          By: Sma├»l at 2012-06-03 23:24:41

12. I did all steps, but it only shows the first pictu
View Tutorial          By: behzad at 2012-07-15 16:32:41

13. imgView.setBackgroundResource(R.drawable.ani);

View Tutorial          By: Syamantak Basu at 2012-08-21 09:32:19

14. this is a good and simple app and working great bu
View Tutorial          By: Dhiraj Bothra at 2012-09-09 06:24:24

15. imgView.setBackgroundResource(R.drawable.ani); i g
View Tutorial          By: mamu at 2012-10-18 14:41:31

16. In case your having trouble

1 the a

View Tutorial          By: Sin at 2013-01-17 05:40:37

17. Its nice and really apriciate rakesh sir i try t
View Tutorial          By: prince at 2013-04-18 09:46:34

18. its amazing for me i learn a lot from it thanks..
View Tutorial          By: sufyan at 2014-10-26 14:39:34