Animation background, using animation-list and AnimationDrawable

In the article Simulate Animation, using Runnable Thread, I described how to simulate animation using Runnable Thread. For sure, it's not a good practice. In this article I show how to implement animation using animation-list and AnimationDrawable.


The animation can be started and stopped by the two button, Start and Stop.

- Save the four graphics, used to form the animation of a rotating arrow, in the /res/drawable/ folder.



- Create a file named arrow_animation.xml in /res/drawable

<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item android:drawable="@drawable/arrow_01" android:duration="100" />
<item android:drawable="@drawable/arrow_02" android:duration="100" />
<item android:drawable="@drawable/arrow_03" android:duration="100" />
<item android:drawable="@drawable/arrow_04" android:duration="100" />
</animation-list>

- Modify main.xml to add two Button to Start and Stop animation

<?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:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<Button
android:id="@+id/myStartButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
/>
<Button
android:id="@+id/myStopButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stop"
/>
<ImageView
android:id="@+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</LinearLayout>

- Modify the Java code as:

package com.exercise.AndroidAnimationDrawable;

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

public class AndroidAnimationDrawable extends Activity {

AnimationDrawable AniFrame;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Button MyStartButton = (Button)findViewById(R.id.myStartButton);
MyStartButton.setOnClickListener(MyStartButtonOnClickListener);
Button MyStopButton = (Button)findViewById(R.id.myStopButton);
MyStopButton.setOnClickListener(MyStopButtonOnClickListener);

ImageView MyImageView = (ImageView)findViewById(R.id.myImageView);
MyImageView.setBackgroundResource(R.drawable.arrow_animation);
AniFrame = (AnimationDrawable) MyImageView.getBackground();
}

Button.OnClickListener MyStartButtonOnClickListener =
new Button.OnClickListener(){
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
AniFrame.start();
}
};

Button.OnClickListener MyStopButtonOnClickListener =
new Button.OnClickListener(){
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
AniFrame.stop();
}
};

}

----------------------------------------
In the book of Professional Android Application Development (Wrox Programmer to Programmer) by Reto Meier, it's stated that:

At the time of going to print, there is a bug in the AnimationDrawable class. Currently, AnimationDrawable resources are not properly loaded until some time after an Activity’s onCreate method has completed. Current work-arounds use timers to force a delay before loading a frame-by-frame resource.



I have the same problem; if AniFrame.start() is called inside onCreate() immediately, the animation cannot start. That's why I add the buttons to start and stop the operation.
----------------------------------------