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

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 2

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 3

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 4

Here is The Best Way

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

Answer 5

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 6

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

Use below code

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

Answer 7

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 8

For Glide 4.+

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

Answer 9

Use GlideDrawableImageViewTarget. This code works for me.

GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(imageView);

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

Answer 10

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 11

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 12

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

Answer 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

Answer 14

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