Cannot stop gif onClick- Getting TransitionDrawable instead of Animate/GifDrawable

[hardik9850]

I am loading gif image in Imageview with container recyclerview.
Currently the recyclerview has only 1 gif and other are bitmaps.
I am loading gif as

Glide.with(context)
    .load("https://media.giphy.com/media/TcKmUDTdICRwY/giphy.gif")
    .asGif()
    .override(params.width, params.height)
    .diskCacheStrategy(DiskCacheStrategy.RESULT)
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.placeholder)
    .listener(new RequestListener<Uri, GifDrawable>() {
            @Override
            public boolean onException(Exception e, Uri model, Target<GifDrawable> target, boolean isFirstResource) {
                return false;
            }

            @Override
            public boolean onResourceReady(GifDrawable resource, Uri model, Target<GifDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                resource.stop(); //Stoping gif animation on complete download
                return false;
            }
    })
    .into(feed.imgFeed);

I want on Demand gif loading i.e When gif image is completely downloaded i don't want to start it on it's own rather when user clicks it.
In click event i am checking drawable instance if it's Animated/GifDrawable to start the animation.
But i am receiving TransitionDrawable that does not allow animation.

Tried loading other gifs but same issue was reproduced.

Is there any workound?

[TWiStErRob]

.dontAnimate() will disable TransitionDrawable wrapping, but at the same time it'll disable animation as well obviously.

The better approach here is this:

• Use .diskCacheStrategy(SOURCE) to have fast GIF display (otherwise you may end up waiting up to half a minute on first load. (which you don't notice because it only happened once for you / clear caches to see what I mean)
• Once you have SOURCE cache you can display the image with .asBitmap() forcing the first frame to be displayed.
• SOURCE will also make sure when loading the first frame and the animation the file won't be downloaded twice
• in onClick load the same image with different params, that is .asGif() to "start the animation" this saves a lot of memory and processing if you have multiple GIFs

Here's some code:

final Uri uri = Uri.parse("https://media.giphy.com/media/TcKmUDTdICRwY/giphy.gif");
final BitmapRequestBuilder<Uri, GlideDrawable> thumbRequest = Glide
        .with(context)
        .load(uri)
        .asBitmap() // force first frame for Gif
        .transcode(new BitmapToGlideDrawableTranscoder(context), GlideDrawable.class)
        .override(params.width, params.height)
        .diskCacheStrategy(DiskCacheStrategy.ALL)
        .placeholder(R.drawable.image_placeholder)
        .error(R.drawable.image_error)
        .fitCenter()
;
thumbRequest.into(feed.imgFeed);
feed.imgFeed.setOnClickListener(new OnClickListener() { // or any parent of imgFeed
    @Override public void onClick(View v) {
        Glide
                .with(context)
                .load(uri) // load as usual (Gif as animated, other formats as Bitmap)
                .override(params.width, params.height)
                .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                .placeholder(R.drawable.image_placeholder)
                .error(R.drawable.image_error)
                .thumbnail(thumbRequest)
                .dontAnimate()
                .into(feed.imgFeed);
    }
});

Few things to note:

• worth using different placeholder/error drawables so you actually have visual confirmation if there's an error
• you would eventually run into Replace image on an imageview without showing white background? #527 so I added a thumbnail request inside, to achieve that
  • the Bitmap (first frame) needs to be transcoded to Drawable so it's compatible with the other request
  • Glide automatically detects if an image is a Gif, so there's no .asGif() inside onClick.
  • added dontAnimate() so the Gif will just start playing immediately after click without any visual weirdness
• .fitCenter() is needed because thumbnails don't have the implicit transformation applied based on ImageView.scaleType. It needs to be there for a memory cache hit to happen properly so there's no flash when the user taps.
• this code is untested, but it compiles