Show GIF file with Glide (image loading and caching library)
AndroidImageviewGifAndroid GlideAndroid Problem Overview
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?
Android Solutions
Solution 1 - Android
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);
Solution 2 - Android
For Glide 4.+
ImageView imageView = (ImageView) findViewById(R.id.imageView);
Glide.with(this).asGif().load(R.raw.image_gif).into(imageView);
Solution 3 - Android
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()
Solution 4 - Android
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)
....
Solution 5 - Android
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
Solution 6 - Android
Glide automatically plays animated gif files, no need of extra method
Use below code
Glide.with(this)
.load(R.drawable.logo)
.into(imageView);
Solution 7 - Android
Use GlideDrawableImageViewTarget. This code works for me.
GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(imageView);
Glide.with(this).load(R.drawable.logo_gif).into(imageViewTarget);
Solution 8 - Android
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.
Solution 9 - Android
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
Solution 10 - Android
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);
Solution 11 - Android
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);
Solution 12 - Android
Here is The Best Way
Glide.with(a).load(item[position])
.thumbnail(Glide.with(a).load(R.drawable.preloader))
.fitCenter()
.crossFade()
.into(imageView);
Solution 13 - Android
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);
}
Solution 14 - Android
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'