Set Visibility of Progress Bar Gone on Completion of Image Loading Using Glide Library

Set visibility of progress bar gone on completion of image loading using Glide library

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.

Progress bar while loading image using Glide

Edit: This is super simple now with the CircularProgressDrawable

build.gradle

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"

MyGlideModule.kt

@GlideModule
class MyGlideModule : AppGlideModule()

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val circularProgressDrawable = CircularProgressDrawable(this)
circularProgressDrawable.strokeWidth = 5f
circularProgressDrawable.centerRadius = 30f
circularProgressDrawable.start()

GlideApp.with(applicationContext)
.load("https://raw.githubusercontent.com/bumptech/glide/master/static/glide_logo.png")
.placeholder(circularProgressDrawable)
.into(a_main_image)
}

These are some other Glide snippets


Old answer: You could also create a normal ProgressBar, and then hide it on Glide's onResourceReady().

The method that will be called when the resource load has finished.


Example:

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final ImageView imageView = (ImageView) findViewById(R.id.img_glide);
final ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress);

Glide.with(this)
.load("https://raw.githubusercontent.com/bumptech/glide/master/static/glide_logo.png")
.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(imageView);
}

activity_main.xml (layout):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ProgressBar
android:id="@+id/progress"
android:layout_width="match_parent"
android:layout_height="100dp"
android:visibility="visible" />

<ImageView
android:id="@+id/img_glide"
android:layout_width="match_parent"
android:layout_height="100dp" />

</RelativeLayout>

Result:

Sample Image

How to show progressbar using Volley/ Glide/Picasso or other , while image downloading from server

Try this using glide

progressBar = (ProgressBar)findViewById(R.id.progressBar);
progressBar.setVisibility(View.VISIBLE);
Glide.with(context)
.load(imageUrl)
.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(imageview);

with Picasso

Picasso.with(context)
.load(imageUrl)
.into(imageview, new com.squareup.picasso.Callback() {
@Override
public void onSuccess() {
//do something when picture is loaded successfully
progressBar.setVisibility(View.GONE);

}

@Override
public void onError() {
//do something when there is picture loading error
}
});

with AsyncTask

public class DownloadImage extends AsyncTask<String, Integer, Bitmap> {
ImageView bmImage;
ProgressBar progressBar;

public DownloadImage(ImageView bmImage, ProgressBar progressBar) {
this.bmImage = bmImage;
this.progressBar = progressBar;
}

protected Bitmap doInBackground(String... urls) {
String urldisplay = urls[0];
Bitmap mIcon11 = null;
try {
InputStream in = new java.net.URL(urldisplay).openStream();
mIcon11 = BitmapFactory.decodeStream(in);
} catch (Exception e) {
Log.d("Error", e.getStackTrace().toString());

}
return mIcon11;
}

@Override
protected void onProgressUpdate(Integer... values) {
super.onProgressUpdate(values);
progressBar.setProgress(values[0]);
}

protected void onPostExecute(Bitmap result) {
bmImage.setImageBitmap(result);
}
}

use like this

 new DownloadImage(imamgeview,progressBar).execute(url);

progressbar disappears before the image appears

Use this may help you,

EDIT

Use Glide v-4.2.0 update gradle.build()

compile 'com.github.bumptech.glide:glide:4.2.0'

Then use below code this is working for me

  Glide.with(context)
.load((post.getImgUrl()))
.apply(new RequestOptions()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.priority(Priority.HIGH))
.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(image);

see the image below

Sample Image



Related Topics



Leave a reply



Submit