'Set visibility of progress bar gone on completion of image loading using Glide library
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?
Solution 1:[1]
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:[2]
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:[3]
My answer was based on out-dated APIs. See here for the more up-to-date answer.
Solution 4:[4]
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:[5]
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:[6]
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:[7]
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:[8]
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:[9]
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:[10]
- 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:[11]
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:[12]
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:[13]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow