Set visibility of progress bar gone on completion of image loading using Glide library
AndroidImageviewAndroid GlideAndroid Problem Overview
Hi I want to have a progress bar for image which will shown while image loading but when image loading will be completed I want to set it to gone. Earlier I was using Picasso library for this. But I don't know how to use it with Glide library. I have idea that some resource ready function is there but I don't know how to use it. Can anyone help me?
Code for Picasso Library
Picasso.with(mcontext).load(imgLinkArray.get(position).mUrlLink)
.into(imageView, new Callback() {
@Override
public void onSuccess() {
progressBar.setVisibility(View.GONE);
}
@Override
public void onError() {
}
})
;
Now How Can I do this with Glide?
Glide.with(mcontext).load(imgLinkArray.get(position).mUrlLink)
.into(imageView);
I am able to load image by this with Glide but how can I write progressBar.setVisibility(View.GONE); somewhere in code if image get loaded?
Android Solutions
Solution 1 - Android
Question is rather old, and I don't know what was the situation with glide in those times, but now it can be easily done with listener (not as proposed in the answer chosen as correct).
progressBar.setVisibility(View.VISIBLE);
Glide.with(getActivity())
.load(args.getString(IMAGE_TO_SHOW))
.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) {
progressBar.setVisibility(View.GONE);
return false;
}
})
.into(imageFrame)
;
You return true if want to handle things like animations yourself and false if want glide to handle them for you.
Solution 2 - Android
If you want to do this in KOTLIN, you can try that way:
Glide.with(context)
.load(url)
.listener(object : RequestListener<Drawable> {
override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean): Boolean {
//TODO: something on exception
}
override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
Log.d(TAG, "OnResourceReady")
//do something when picture already loaded
return false
}
})
.into(imgView)
Solution 3 - Android
My answer was based on out-dated APIs. See here for the more up-to-date answer.
Solution 4 - Android
In exception put a condition for show again the ProgressBar
Glide.with(context)
.load(image_url)
.listener(new RequestListener<String, GlideDrawable>() {
@Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
if(e instanceof UnknownHostException)
progressBar.setVisibility(View.VISIBLE);
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
progressBar.setVisibility(View.GONE);
return false;
}
})
.into(imageView);
Solution 5 - Android
The above solution works pretty well for me too but when i use asBitmap() to download the image. It does not work.
We need to use BitmapImageViewTarget
Glide.with(this) .load(imageURL)
.asBitmap()
.placeholder(R.drawable.bg)
.into(new BitmapImageViewTarget(imageView) {
@Override
public void onResourceReady(Bitmap drawable, GlideAnimation anim) {
super.onResourceReady(drawable, anim);
progressBar.setVisibility(View.GONE);
}
});
Solution 6 - Android
GlideDrawable are deprecated, use simple Drawable
RequestOptions requestOptions = new RequestOptions();
requestOptions.placeholder(R.drawable.placeholder);
requestOptions.error(R.drawable.error);
Glide.with(getContext())
.setDefaultRequestOptions(requestOptions)
.load(finalPathOrUrl)
.listener(new RequestListener<Drawable>() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
progressBar.setVisibility(View.GONE);
return false;
}
@Override
public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
progressBar.setVisibility(View.GONE);
return false;
}
})
.into(mImageView);
Solution 7 - Android
In Kotlin you can do like below
Glide.with(context)
.setDefaultRequestOptions(RequestOptions().placeholder(R.drawable.ic_image_placeholder).error(R.drawable.ic_image_placeholder))
.load(url)
.listener(object : RequestListener<Drawable>{
override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean): Boolean {
return false
}
override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
return false
}
})
.into(imageView)
Solution 8 - Android
Update:
Glide.with(this)
.load(imageUrl)
.listener(new RequestListener<Drawable>() {
@Override
public boolean onLoadFailed(@Nullable final GlideException e,
final Object model, final Target<Drawable> target,
final boolean isFirstResource) {
showProgress(false);
mNoContentTextView.setVisibility(View.VISIBLE);
return false;
}
@Override
public boolean onResourceReady(final Drawable resource,
final Object model,
final Target<Drawable> target,
final DataSource dataSource,
final boolean isFirstResource) {
showProgress(false);
mNoContentTextView.setVisibility(View.GONE);
mContentImageView.setImageDrawable(resource);
return false;
}
})
.into(mContentImageView);
Solution 9 - Android
Kotlin way
showProgressBar()
Glide.with(context)
.load(image_url)
.listener(object : com.bumptech.glide.request.RequestListener<Drawable> {
override fun onLoadFailed(
e: GlideException?,
model: Any?,
target: Target<Drawable>?,
isFirstResource: Boolean
): Boolean {
hideProgressBar()
return false
}
override fun onResourceReady(
resource: Drawable?,
model: Any?,
target: Target<Drawable>?,
dataSource: DataSource?,
isFirstResource: Boolean
): Boolean {
img_product_banner.visibility = View.VISIBLE
hideProgressBar()
return false
}
}).placeholder(R.drawable.placeholder)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(img_product_banner)
Solution 10 - Android
-
In xml take progress bar with height & width(match_parent).
-
Before call below mention method , set progress bar visibility Visible.
public void setImageWIthProgressBar(Context context, final ImageView imageView, String imageUrl, final ProgressBar progressBar) { Glide.with(context) .load(imageUrl) .listener(new RequestListener<String, GlideDrawable>() { @Override public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) { progressBar.setVisibility(View.GONE); return false; } @Override public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) { progressBar.setVisibility(View.GONE); return false; } }) .into(imageView); }//setImageWIthProgressBar
Solution 11 - Android
How I did things. the shorter way, cleaner code
example:
progress_bar.visibility = View.VISIBLE
profilePicturePath?.let {
GlideApp.with(applicationContext)
.load(CloudStorage.pathToReference(it))
.placeholder(R.drawable.placeholder)
.listener(GlideImpl.OnCompleted {
progress_bar.visibility = View.GONE
})
.into(profile_picture)
} ?: profile_picture.setImageResource(R.drawable.placeholder)
usage:
GlideImpl.OnCompleted {
// completed
}
just pass GlideImpl.OnCompleted { } to the Glide's .listener()
> GlideImpl.kt class that accepts Glide's RequestListener
import android.graphics.drawable.Drawable
import com.bumptech.glide.load.DataSource
import com.bumptech.glide.load.engine.GlideException
import com.bumptech.glide.request.RequestListener
import com.bumptech.glide.request.target.Target
object GlideImpl {
object OnCompleted : RequestListener<Drawable> {
private lateinit var onComplete: () -> Unit
operator fun invoke(onComplete: () -> Unit): OnCompleted {
OnCompleted.onComplete = { onComplete() }
return this
}
override fun onResourceReady(
resource: Drawable?,
model: Any?,
target: Target<Drawable>?,
dataSource: DataSource?,
isFirstResource: Boolean
): Boolean {
onComplete()
return false
}
override fun onLoadFailed(
e: GlideException?,
model: Any?,
target: Target<Drawable>?,
isFirstResource: Boolean
): Boolean {
onComplete()
return false
}
}
}
and that is it!
Solution 12 - Android
GlideDrawable is depreciated in 4.x version so if you are moving from 3.x to 4.x simple use Drawable :
Glide
.with(this)
.load(sharedMediaUi.downloadUrl)
.listener(object: RequestListener<Drawable> {
override fun onLoadFailed(
e: GlideException?,
model: Any?,
target: Target<Drawable>?,
isFirstResource: Boolean
): Boolean {
binding.progressCircular.setVisibility(View.GONE)
return false
}
override fun onResourceReady(
resource: Drawable?,
model: Any?,
target: Target<Drawable>?,
dataSource: DataSource?,
isFirstResource: Boolean
): Boolean {
binding.progressCircular.setVisibility(View.GONE)
return false
}
})
.into(binding.imgMedia)
Solution 13 - Android
This is the best answer as it does not use any hack like setting visibility to get the desired output.
Download a gif of progressbar and call it progressbargif and put it in the drawable folder.
Glide.with(ctx)
.load(url)
.thumbnail(Glide.with(ctx).load(R.drawable.progressbargif))
.diskCacheStrategy(DiskCacheStrategy.SOURCE)
.error(R.drawable.image_unavailable)
.crossFade(200)
.into(iv);
Once the url image is loaded, the thumbnail vanishes. The thumbnail vanishes immediately when the cached image is loaded.