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.