How to get finish callback on setImageUrl with Volley library and NetworkImageView?

Question

I'm trying out the Google's new Volley library and it's looking sharp and loads images quickly when I use this method setImageUrl:

holder.image.setImageUrl(url, ImageCacheManager.getInstance().getImageLoader()); 

I want to add to it a call back/listener method that will fire up when loading is finished, so I can remove the progressBar view and show the image. It's an option that exists in Universal Image Loader and Picasso libraries, but for some reason, I can't find a way to do that in Volley, tried to Google different options but so far haven't found any reference.

Does someone have a code sample to illustrate how it's done?

Answer 1

You can use this View instead of Google's View (I've copied sources from it and made some changes):

public class VolleyImageView extends ImageView {      public interface ResponseObserver     {         public void onError();         public void onSuccess();     }      private ResponseObserver mObserver;      public void setResponseObserver(ResponseObserver observer) {         mObserver = observer;     }      /**      * The URL of the network image to load      */     private String mUrl;      /**      * Resource ID of the image to be used as a placeholder until the network image is loaded.      */     private int mDefaultImageId;      /**      * Resource ID of the image to be used if the network response fails.      */     private int mErrorImageId;      /**      * Local copy of the ImageLoader.      */     private ImageLoader mImageLoader;      /**      * Current ImageContainer. (either in-flight or finished)      */     private ImageContainer mImageContainer;      public VolleyImageView(Context context) {         this(context, null);     }      public VolleyImageView(Context context, AttributeSet attrs) {         this(context, attrs, 0);     }      public VolleyImageView(Context context, AttributeSet attrs, int defStyle) {         super(context, attrs, defStyle);     }      /**      * Sets URL of the image that should be loaded into this view. Note that calling this will      * immediately either set the cached image (if available) or the default image specified by      * {@link VolleyImageView#setDefaultImageResId(int)} on the view.      *      * NOTE: If applicable, {@link VolleyImageView#setDefaultImageResId(int)} and {@link      * VolleyImageView#setErrorImageResId(int)} should be called prior to calling this function.      *      * @param url         The URL that should be loaded into this ImageView.      * @param imageLoader ImageLoader that will be used to make the request.      */     public void setImageUrl(String url, ImageLoader imageLoader) {         mUrl = url;         mImageLoader = imageLoader;         // The URL has potentially changed. See if we need to load it.         loadImageIfNecessary(false);     }      /**      * Sets the default image resource ID to be used for this view until the attempt to load it      * completes.      */     public void setDefaultImageResId(int defaultImage) {         mDefaultImageId = defaultImage;     }      /**      * Sets the error image resource ID to be used for this view in the event that the image      * requested fails to load.      */     public void setErrorImageResId(int errorImage) {         mErrorImageId = errorImage;     }      /**      * Loads the image for the view if it isn't already loaded.      *      * @param isInLayoutPass True if this was invoked from a layout pass, false otherwise.      */     private void loadImageIfNecessary(final boolean isInLayoutPass) {         int width = getWidth();         int height = getHeight();          boolean isFullyWrapContent = getLayoutParams() != null                 && getLayoutParams().height == LayoutParams.WRAP_CONTENT                 && getLayoutParams().width == LayoutParams.WRAP_CONTENT;         // if the view's bounds aren't known yet, and this is not a wrap-content/wrap-content         // view, hold off on loading the image.         if (width == 0 && height == 0 && !isFullyWrapContent) {             return;         }          // if the URL to be loaded in this view is empty, cancel any old requests and clear the         // currently loaded image.         if (TextUtils.isEmpty(mUrl)) {             if (mImageContainer != null) {                 mImageContainer.cancelRequest();                 mImageContainer = null;             }             setDefaultImageOrNull();             return;         }          // if there was an old request in this view, check if it needs to be canceled.         if (mImageContainer != null && mImageContainer.getRequestUrl() != null) {             if (mImageContainer.getRequestUrl().equals(mUrl)) {                 // if the request is from the same URL, return.                 return;             } else {                 // if there is a pre-existing request, cancel it if it's fetching a different URL.                 mImageContainer.cancelRequest();                 setDefaultImageOrNull();             }         }          // The pre-existing content of this view didn't match the current URL. Load the new image         // from the network.         ImageContainer newContainer = mImageLoader.get(mUrl,                 new ImageListener() {                     @Override                     public void onErrorResponse(VolleyError error) {                         if (mErrorImageId != 0) {                             setImageResource(mErrorImageId);                         }                          if(mObserver!=null)                         {                             mObserver.onError();                         }                     }                      @Override                     public void onResponse(final ImageContainer response, boolean isImmediate) {                         // If this was an immediate response that was delivered inside of a layout                         // pass do not set the image immediately as it will trigger a requestLayout                         // inside of a layout. Instead, defer setting the image by posting back to                         // the main thread.                         if (isImmediate && isInLayoutPass) {                             post(new Runnable() {                                 @Override                                 public void run() {                                     onResponse(response, false);                                 }                             });                             return;                         }                          if (response.getBitmap() != null) {                             setImageBitmap(response.getBitmap());                         } else if (mDefaultImageId != 0) {                             setImageResource(mDefaultImageId);                         }                          if(mObserver!=null)                         {                             mObserver.onSuccess();                         }                     }                 });          // update the ImageContainer to be the new bitmap container.         mImageContainer = newContainer;     }      private void setDefaultImageOrNull() {         if (mDefaultImageId != 0) {             setImageResource(mDefaultImageId);         } else {             setImageBitmap(null);         }     }      @Override     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {         super.onLayout(changed, left, top, right, bottom);         loadImageIfNecessary(true);     }      @Override     protected void onDetachedFromWindow() {         if (mImageContainer != null) {             // If the view was bound to an image request, cancel it and clear             // out the image from the view.             mImageContainer.cancelRequest();             setImageBitmap(null);             // also clear out the container so we can reload the image if necessary.             mImageContainer = null;         }         super.onDetachedFromWindow();     }      @Override     protected void drawableStateChanged() {         super.drawableStateChanged();         invalidate();     } } 

Usage example :

 //set observer to view  holder.image.setResponseObserver(new VolleyImageView.ResponseObserver() {      @Override      public void onError() {       }       @Override      public void onSuccess() {       }  });  //and then load image holder.image.setImageUrl(url, ImageCacheManager.getInstance().getImageLoader()); 

Answer 2

I did it this way:-

mImageLoader.get(url, new ImageLoader.ImageListener() {     @Override     public void onResponse(ImageLoader.ImageContainer response, boolean isImmediate) {         if (response.getBitmap() != null)             //some code         else             //some code     }     @Override     public void onErrorResponse(VolleyError error) {     } });