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?

Answer 1

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

Answer 2

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

  

Answer 3

Use GlideDrawableImageViewTarget. This code works for me.

GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(imageView);

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

Answer 4

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'

Answer 5

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.

Answer 6

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

Answer 7

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

Use below code

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

Answer 8

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

Answer 9

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

Answer 10

Here is The Best Way

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

Answer 11

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

Answer 12

For Glide 4.+

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

Answer 13

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

Answer 14

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