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?

Cosette

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. – Indreetloire

Answer 1

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);

Fifi

I'm not sure why, but this really is what worked for me, while asGif() just made the whole thing disappear. – Findley

Can you please explain the purpose of GlideDrawableImageViewTarget ? – Sophiesophism

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? – Ethridge

@Sophiesophism i followed 'Plaid' app's source code by Nick Butcher. I tried everything from Glide doc but none worked. – Fifi

@Sophiesophism you can find the source code of the Plaid application here: github.com/nickbutcher/plaid – Farkas

DrawableImageViewTarget imageViewTarget = new DrawableImageViewTarget(mProgressBar); – Pernell

Answer 2

For Glide 4.+

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

Bevins

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. :) – Asterism

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 :<ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/gif" > – Incorporeity

Answer 3

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()

Diane

Answer 4

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)
    ....

Pronunciamento

Please specify that your solution can be used with Glide 4+ – Brander

@marc: thanks it working but error and placeholder is not working – Abert

Answer 5

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

Abominate

Wow. Thannks @Ram lyer. – Compunction

Answer 6

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

Use below code

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

Depressor

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. – Creditable

The new glide version simply plays animated gif – Depressor

Answer 7

Use GlideDrawableImageViewTarget. This code works for me.

GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(imageView);

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

Iraqi

Answer 8

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.

Gallic

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 #71452866 – Bayou

Answer 9

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);

  

Trivia

Answer 10

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

Candent

Answer 11

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>

1. instead of using one, use 2 ImageViews

2. 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);  
   

3. 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);
   

Gorizia

Answer 12

Here is The Best Way

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

Alkmaar

Why downvoted the answer? It works for me, is due to double Glide.with(... – Brander

Answer 13

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);
}

Questionary

Answer 14

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'

Idden