Display Animated GIF

Question

I want to display animated GIF images in my aplication. As I found out the hard way Android doesn't support animated GIF natively.

However it can display animations using AnimationDrawable:

Develop > Guides > Images & Graphics > Drawables Overview

The example uses animation saved as frames in application resources but what I need is to display animated gif directly.

My plan is to break animated GIF to frames and add each frame as drawable to AnimationDrawable.

Does anyone know how to extract frames from animated GIF and convert each of them into Drawable?

Answer 1

Use fresco. Here's how to do it:

http://frescolib.org/docs/animations.html

Here's the repo with the sample:

https://github.com/facebook/fresco/tree/master/samples/animation

Beware fresco does not support wrap content!

Answer 2

Nobody has mentioned the Ion or Glide library. they work very well.

It's easier to handle compared to a WebView.

Answer 3

Put it into a WebView, it has to be able to display it correctly, since the default browser supports gif files. (Froyo+, if i am not mistaken)

Answer 4

UPDATE:

Use glide:

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.0.0'
}

usage:

Glide.with(context).load(GIF_URI).into(new GlideDrawableImageViewTarget(IMAGE_VIEW));

see docs

Answer 5

I solved the problem by splitting gif animations into frames before saving it to phone, so I would not have to deal with it in Android.

Then I download every frame onto phone, create Drawable from it and then create AnimationDrawable - very similar to example from my question

Answer 6

Glide 4.6

1. To Load gif

GlideApp.with(context)
            .load(R.raw.gif) // or url
            .into(imageview);

2. To get the file object

GlideApp.with(context)
                .asGif()
                .load(R.raw.gif) //or url
                .into(new SimpleTarget<GifDrawable>() {
                    @Override
                    public void onResourceReady(@NonNull GifDrawable resource, @Nullable Transition<? super GifDrawable> transition) {

                        resource.start();
                      //resource.setLoopCount(1);
                        imageView.setImageDrawable(resource);
                    }
                });