Question

I have an imageview with a default image. Now when I try to click it, I want it to animate that displays 4 frames of images. How could I accomplish this, I tried a simpler approach (more of a dumb approach) by changing the imageresource 4 times, as expected the image changes so fast that the animating image effect is not visible. Any ideas?

I tried this approach:

Gem = (ImageView)v;
    Gem.setImageResource(com.example.gems.R.drawable.bd1);
    Gem.postDelayed(new Runnable() {
        public void run() {
            Gem.setImageResource(com.example.gems.R.drawable.bd2);
            Gem.postDelayed(new Runnable() {
                public void run() {
                    Gem.setImageResource(com.example.gems.R.drawable.bd3);
                    Gem.postDelayed(new Runnable() {
                        public void run() {
                            Gem.setImageResource(com.example.gems.R.drawable.bd4);
                            Gem.postDelayed(new Runnable() {
                                public void run() {
                                }
                            }, 500);
                        }
                    }, 500);
                }
            }, 500);
        }
    }, 500);

It worked, but is there a better way to this without coding too much lines? I have 25 kinds of images and each image has 4 frames.

EDIT:

I tried using xml transition files:

Java file:

Resources res = this.getResources();
    Gem = (ImageView)v;
    TransitionDrawable transition;

    transition = (TransitionDrawable)
            res.getDrawable(R.drawable.blue_diamond_animation);
    Gem.setImageDrawable(transition);
    transition.startTransition(3000);

xml file:

 <transition xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/bd1"></item>
  <item android:drawable="@drawable/bd2"></item>
  <item android:drawable="@drawable/bd3"></item>
  <item android:drawable="@drawable/bd4"></item>
  <item android:drawable="@drawable/invi"></item>
 </transition>

This seems to work, but I don’t want to draw this images in a transition. I want to change the background in a transition. I tried changing this android:drawable to android:drawable but it doesn’t work.

Answer 1

It turns out that there is an exact class for this: AnimationDrawable

Basically, just add frames with the other pictures to use in the animation to the AnimationDrawable object and specify how long they should display using addFrame(Drawable frame, int duration)

Then set the ImageView to display whatever image it should start with and set the background to the AnimationDrawable you just made using setBackgroundDrawable(Animation)

Lastly, start the animation in the onClick listener

EDIT: FOR EXAMPLE

AnimationDrawable ad = new AnimationDrawable();
ad.addFrame(getResources().getDrawable(R.drawable.image1), 100);
ad.addFrame(getResources().getDrawable(R.drawable.image2), 500);
ad.addFrame(getResources().getDrawable(R.drawable.image3), 300);

ImageView iv = (ImageView) findViewById(R.id.img);
iv.setBackgroundDrawable(animation);

And then in your onClick listener, just call ad.start