How to animate .gif images in an android?

Question

Here is the code for xml:

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/minepic" />

Here the minepic is a gif animated image but after running the application its just showing a static image.

Is there any solution about how to animate the .gif images in android application?

Answer 1

To give a precise and complete answer here is what you need to do step wise:

1. You would need to have different .png images which will act as frames for your animation. Save them in res/drawable folder.

2. Create anim.xml file in res/drawable folder with following content:

   <?xml version="1.0" encoding="utf-8"?>
   <animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
       android:oneshot="false">
   
       <item android:drawable="@drawable/image_3" android:duration="250" />
       <item android:drawable="@drawable/image_2" android:duration="250" />
       <item android:drawable="@drawable/image_1" android:duration="250" />
       <item android:drawable="@drawable/image" android:duration="250" />
   
   </animation-list>
   

3. In the layout xml file inside which you want to show the animation:

   //...
   <ImageView
        android:id="@+id/iv_animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:contentDescription="Animation" />
   //...
   

4. In the Java file which loads the the layout xml file and calls setContentView:

   //...
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   
       final ImageView animImageView = (ImageView) findViewById(R.id.iv_animation);
       animImageView.setBackgroundResource(R.drawable.anim);
       animImageView.post(new Runnable() {
           @Override
           public void run() {
               AnimationDrawable frameAnimation =
                   (AnimationDrawable) animImageView.getBackground();
               frameAnimation.start();
           }
       });
       // ... other code ... 
   }
   // ...
   

In order to stop the animation you can call .stop() on the AnimationDrawable. For more details about the available methods, you can see AnimationDrawable documentation. Hope it helps someone.

Answer 2

I wouldn't recommend using Movie or WebView classes but ImageView instead with source drawable set to animation-list. Look at example(mydrawable.xml):

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/image_1" android:duration="100" />
<item android:drawable="@drawable/image_2" android:duration="100" />
<item android:drawable="@drawable/image_3" android:duration="100" />
</animation-list> 

// in your layout : <ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/my_drawable" />

Obviously, you have to slice your .gif into seperate images before using this solution.

Answer 3

As far as I understand, your GIF image is not moving, so that's the native Android behaviour if you treat GIF like a static picture. For me the best solution (not to reinvent the wheel!) was the open-source library gitDrawable. Check their README, everything is very simple: add dependency to gradle and use(in XML or code). Example of usage in Java:

GifDrawable gifFromResource = new GifDrawable( getResources(), R.drawable.anim );

Answer 4

And i think this is the one way of solution by writing the anim-space.xml 
In which the slices of the image are added to the items one by one and setting that xml to the imageview of our layout xml.

http://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html

In this developers link it is defined clearly.

Answer 5

Well i was able to animate android images using this simple code:

canvas.drawColor(Color.WHITE);
super.onDraw(canvas);


long now=android.os.SystemClock.uptimeMillis();
System.out.println("now="+now);
if (moviestart == 0) { // first time
moviestart = now;

}

System.out.println("\tmoviestart="+moviestart);
int relTime = (int)((now - moviestart) % movie.duration()) ;
 System.out.println("time="+relTime+"\treltime="+movie.duration());
movie.setTime(relTime);
movie.draw(canvas,this.getWidth()/2-20,this.getHeight()/2-40);
this.invalidate();
 }

it was implemented easily using movieview

or i can i give you a tutorial for this stuff

Answer 6

It's not good practice to use Threads (i.e. View.post(new Runnable)) because the view might have changed during the time the drawable is going to be painted (one case is using the animated image on ListView with items containing different background images), which may cause a ClassCastException if the ImageView, by the time the thread runs, has a background that is not an animated resource.

ImageView loadingImg = (ImageView)v.findViewById(R.id.image);
loadingImg.setBackgroundResource(R.drawable.progressdialog);
loadingImg.addOnAttachStateChangeListener(new View.OnAttachStateChangeListener() {
  @Override
  public void onViewAttachedToWindow(View v) {
    AnimationDrawable loadingAnimation = (AnimationDrawable) v.getBackground();
    loadingAnimation.start();
  }

  @Override
  public void onViewDetachedFromWindow(View v) {
  }
});

Example shown here