Show GIF file with Glide (image loading and caching library)

Question

I try to show a GIF image as loading placeholder in image view - with Glide Library:

Glide.with(context)
    .load(ImageUrl())
    .placeholder(R.drawable.loading2)
    .asGif()
    .crossFade()
    .into(image);

I try to show this file

loading2.gif

but get this error :

Error:(54, 86) error: cannot find symbol method asGif()

How can I show GIF file with Glide in a imageView?

Looks like maybe your missing the right version of Glide? Is really strange that does not find the symbol also try to o a clean. — Ivor, Jan 15 '18 at 13:15

score 124 · Answer 1 · answered Jan 19 '16 at 07:26

124

The above answer didn't work for me. The below code works.

ImageView imageView = (ImageView) findViewById(R.id.imageView);
GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(imageView);
Glide.with(this).load(R.raw.sample_gif).into(imageViewTarget);

answered Jan 19 '16 at 07:26

Preetam

5,528
10
32
39

4

I'm not sure why, but this really **is** what worked for me, while `asGif()` just made the whole thing disappear. – EpicPandaForce May 22 '16 at 22:27
2

Can you please explain the purpose of GlideDrawableImageViewTarget ? – Jaydev Jun 09 '16 at 22:06
5

this answer just shows the gif file. it doesn't work like placeholder. how can i use this answer to show gif file when image is loading like placeholder? – Hojjat Mehri Jul 22 '16 at 17:28
2

@Jaydev i followed 'Plaid' app's source code by Nick Butcher. I tried everything from Glide doc but none worked. – Preetam Oct 09 '16 at 15:04
1

@Jaydev you can find the source code of the Plaid application here: https://github.com/nickbutcher/plaid – fasteque Oct 11 '16 at 09:15
1

DrawableImageViewTarget imageViewTarget = new DrawableImageViewTarget(mProgressBar); – ashishdhiman2007 Mar 29 '19 at 09:38

score 63 · Answer 2 · edited Sep 30 '18 at 09:07

63

For Glide 4.+

ImageView imageView = (ImageView) findViewById(R.id.imageView);
Glide.with(this).asGif().load(R.raw.image_gif).into(imageView);

edited Sep 30 '18 at 09:07

Mohammed Junaid

1,362
14
18

answered Jun 12 '17 at 07:03

Sachin Thampan

893
7
17

1

Thank you very much, Glide is so much better than Ion, because Ion keeps lagging my sound probably because Ion takes more memory or whatever but it glitches my sound, also I prefer Glide syntax it feels more reasonable for me glad I found Glide to solve my problem. :) – Simple Oct 06 '18 at 17:28
I can't able to see the gif ImageView imageView = (ImageView) v.findViewById(R.id.gif); Glide.with(this).asGif().load(R.raw.steam4).into(imageView); code : – sejn Dec 17 '20 at 06:15

score 21 · Answer 3 · answered Jun 30 '15 at 01:14

For Glide 3.0 you need to set asGif() earlier:

Glide.with(context)
    .load(imageUrl)
    .asGif()
    .placeholder(R.drawable.loading2)
    .crossFade()
    .into(imageView);

Keep in mind that just using load() will load either a GIF or a Bitmap depending on the type of the data. Unless you want your load to fail if the given url is not a gif, you don't need to specify asGif()

score 17 · Answer 4 · edited Jul 23 '17 at 04:25

17

I had this same problem. You can resolve it by moving where the asGif() is located. It must come directly before .load().

So change:

Glide.with(context)
    .load(ImageUrl())
    .placeholder(R.drawable.loading2)
    .asGif()  
    ....

to

Glide.with(context)
     .asGif()         
     .load(ImageUrl())
     .placeholder(R.drawable.loading2)
    ....

edited Jul 23 '17 at 04:25

MikeT

51,415
16
49
68

answered Jan 24 '17 at 00:05

marc

223
2
6

1

Please specify that your solution can be used with Glide 4+ – Matteo Gaggiano Jan 31 '18 at 11:34
1

@marc: thanks it working but error and placeholder is not working – Ramesh Bhati Mar 13 '18 at 05:07

Ram Iyer · Answer 5 · 2019-08-12T08:36:28.383

Here is another example. I have observed that Glide doesn't play Gif automatically sometimes. This solution worked for me:

In the example, imageView is one of the members in the RecyclerView's ViewHolder class.

Glide.with(itemView.getContext())
    .asGif()
    .load(thumbPath)                             
    .placeholder(ResourcesCompat.getDrawable(context.getResources(), 
                     R.drawable.image_loading_placeholder, null))
    .centerCrop()
    .into(new ImageViewTarget<GifDrawable>(imageView) {
         @Override
         protected void setResource(@Nullable GifDrawable resource) {
             imageView.setImageDrawable(resource);
         }
     });

The method .asGif() needs to be used earlier or it will not be recognized

Wow. Thannks @Ram lyer. – Kenny Dabiri Jun 25 '20 at 18:16 — Kenny Dabiri, Jun 25 '20 at 18:16

Arpit Jain · Answer 6 · 2018-02-18T06:38:22.547

4

Glide automatically plays animated gif files, no need of extra method

Use below code

Glide.with(this)
   .load(R.drawable.logo)
   .into(imageView);

edited Feb 18 '18 at 06:38

answered Feb 06 '17 at 10:43

Arpit Jain

94
1
5

2

You should really add some explanation as to why this should work - you can also add code as well as the comments in the code itself - in its current form, it does not provide any explanation which can help the rest of the community to understand what you did to solve/answer the question. This is especially important for an older question and the questions that already have answers. – Raymond Feb 06 '17 at 11:05
1

The new glide version simply plays animated gif – Arpit Jain Feb 18 '18 at 06:39

score 4 · Answer 7 · edited Feb 17 '18 at 06:45

4

Use GlideDrawableImageViewTarget. This code works for me.

GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(imageView);

Glide.with(this).load(R.drawable.logo_gif).into(imageViewTarget);

edited Feb 17 '18 at 06:45

BSMP

4,596
8
33
44

answered Jan 13 '18 at 17:55

Sukhdeep Saini

71
2

score 3 · Answer 8 · answered Dec 01 '18 at 11:24

3

From Glide version v4 :

Dependency:

implementation 'com.github.bumptech.glide:glide:4.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'

Visit this link To create GlideApp class:

You can directly give drawable reference on GlideApp

GlideApp.with(this).load(R.drawable.ic_loader).into(mBinding.progressBar);

If you get any error, please let me know.

answered Dec 01 '18 at 11:24

Pratik Butani

60,504
58
273
437

Hey pratik, would you suggest about resizing gif for saving as file. i tried asGif() and then convert the resource to gif but it simply ignore the new size that it it keeps the original file while it works fine for static image. I have asked the question here https://stackoverflow.com/questions/71452366/glide-how-to-resize-and-save-the-gif-as-file-using-glide-v4?noredirect=1#comment126298047_71452366 – CrackerKSR Mar 20 '22 at 13:37

score 3 · Answer 9 · answered Jun 02 '21 at 10:18

put your gif in raw folder and the use this below code also add the below dependency in your gradle

        //for glide
implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
   ImageView layoutAnim;

 //load gif file to imageView where layoutanim is my imageView

    Glide.with(this).asGif().load(R.raw.backloader).into(layoutAnim);

score 1 · Answer 10 · answered Sep 03 '20 at 13:13

I'm using Glide version 4.11 and for me it did work setting .asGif() right after Glide.with(context).

But I had another problem, I've also set .dontAnimate() when loading gif into ImageView. Apparently this doesn't work, so I had to remove .dontAnimate() from my setup, and everything worked after that change.

Here is issue for more info https://github.com/bumptech/glide/issues/3395

score 0 · Answer 11 · edited Jan 11 '18 at 18:20

This solution is kind of work around

<RelativeLayout
    android:layout_width="wrap_content"
    android:id="@+id/ImageContainer"
    android:background="#fff"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="wrap_content"
        android:id="@+id/loadingImageView"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content"/>
    <ImageView
        android:id="@+id/mainImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:layout_centerInParent="true"
     />
</RelativeLayout>

instead of using one, use 2 ImageViews

Put loading gif in first ImageView using the solution given by @Preetam

ImageView loadingImageView = (ImageView) findViewById(R.id.loadingImageView);
GlideDrawableImageViewTarget loadingImageViewTarget = new GlideDrawableImageViewTarget(loadingImageView);
Glide.with(this).load(R.raw.spinner).into(loadingImageViewTarget);

Load Image from network in the second ImageView (Order is important if you don't want to hide the loading gif once the image from network is loaded)

ImageView mainImageView = (ImageView) findViewById(R.id.mainImageView);
GlideDrawableImageViewTarget mainImageViewTarget = new GlideDrawableImageViewTarget(mainImageView);
Glide.with(this).load(imageUrl).into(mainImageViewTarget);

score 0 · Answer 12 · answered Oct 09 '16 at 18:48

0

Here is The Best Way

 Glide.with(a).load(item[position])
            .thumbnail(Glide.with(a).load(R.drawable.preloader))
            .fitCenter()
            .crossFade()
            .into(imageView);

answered Oct 09 '16 at 18:48

Mahmoud Kamal

421
3
8

Why downvoted the answer? It works for me, is due to double `Glide.with(...` – Matteo Gaggiano Jan 31 '18 at 11:12

score 0 · Answer 13 · answered Feb 17 '17 at 22:47

Try this. It worked for me and will work for your code too.It works for both images as well as gifs too.

ImageView imageView = (ImageView) findViewById(R.id.test_image); 
    GlideDrawableImageViewTarget imagePreview = new GlideDrawableImageViewTarget(imageView);
    Glide
            .with(this)
            .load(url)
            .listener(new RequestListener<String, GlideDrawable>() {
                @Override
                public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {                       
                    return false;
                }

                @Override
                public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                    return false;
                }
            })
            .into(imagePreview);
}

score 0 · Answer 14 · answered Nov 29 '18 at 12:59

Instead of GlideDrawableImageViewTarget use DrawableImageViewTarget     
ImageView imageView =findViewById(R.id.imageView);
     DrawableImageViewTarget imageViewTarget = new DrawableImageViewTarget (imageView);
     Glide.with(this).load(R.raw.image_loader).into(imageViewTarget);

    library: implementation 'com.github.bumptech.glide:glide:4.8.0'
        annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'

Show GIF file with Glide (image loading and caching library)

14 Answers14

Linked