Tuesday, October 13, 2009

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

}


1 comment:

navalkishoreb said...

It's important to note that the start() method called on the AnimationDrawable cannot be called during the onCreate() method of your Activity, because the AnimationDrawable is not yet fully attached to the window. If you want to play the animation immediately, without requiring interaction, then you might want to call it from the onWindowFocusChanged() method in your Activity, which will get called when Android brings your window into focus.

-- source Drawable Animation developer.adnroid.com