Android Picasso - Placeholder and Error image styling

Question

I'm using Picasso library for image downloading from the network. I just wonder whether I can use a progress dialog or a GIF image as a place holder? Also any idea on how to make place holder image to be smaller (and fit in centre) than the actual image that is downloaded?

I tried going thru the samples but no luck. Any one here who got this to work?

Answer 1

You can use a placeholder image by using the *.placeholder(R.drawable.image_name)* in your Picasso call like:

Picasso.with(context)        .load(imageUrl)        .placeholder(R.drawable.image_name) 

If you want to use a progress bar instead of a placeholder image you can create a callback inside the .into function. Do something similar to the following:

in your view:

//create the progressBar here and set it to GONE. This can be your adapters list item view for example <RelativeLayout     android:id="@+id/myContainer"     android:layout_width="wrap_content"     android:layout_height="wrap_content">       <ProgressBar         android:id="@+id/progressBar"         style="?android:attr/progressBarStyleSmall"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:visibility="gone"         android:layout_centerHorizontal="true"         android:layout_centerVertical="true"         android:layout_marginTop="20dp"         android:layout_marginBottom="20dp"/>      <ImageView         android:id="@+id/myImageView"         android:layout_width="60dp"         android:layout_height="60dp"         android:layout_gravity="center"         android:layout_margin="5dp"         android:paddingLeft="60dp"         android:scaleType="centerCrop"></ImageView>  </RelativeLayout> 

In your adapter/class:

//create a new progress bar for each image to be loaded ProgressBar progressBar = null; if (view != null) {    progressBar = (ProgressBar) view.findViewById(R.id.progressBar);    progressBar.setVisibility(View.VISIBLE); }  //get your image view ImageView myImage = (ImageView) view.findViewById(R.id.myImageView);  //load the image url with a callback to a callback method/class Picasso.with(context)             .load(imageUrl)             .into(myImage,  new ImageLoadedCallback(progressBar) {                     @Override                     public void onSuccess() {                         if (this.progressBar != null) {                             this.progressBar.setVisibility(View.GONE);                          }                     }               }); 

inside your adapter/class as above I create an inner class for the callback:

private class ImageLoadedCallback implements Callback {    ProgressBar progressBar;      public  ImageLoadedCallback(ProgressBar progBar){         progressBar = progBar;     }      @Override     public void onSuccess() {      }      @Override     public void onError() {      } } 

Hope this makes sense!

Answer 2

I implemented the progress dialog till the image download and its very simple. Take your ImageView in relative layout and place progress loader on same image view. Apply the below code and handle progress dialog visibility only.

                holder.loader.setVisibility(View.VISIBLE);                 holder.imageView.setVisibility(View.VISIBLE);                 final ProgressBar progressView = holder.loader;                 Picasso.with(context)                 .load(image_url)                 .transform(new RoundedTransformation(15, 0))                 .fit()                 .into(holder.imageView, new Callback() {                     @Override                     public void onSuccess() {                         progressView.setVisibility(View.GONE);                     }                      @Override                     public void onError() {                         // TODO Auto-generated method stub                      }                 });             } 

Hope it will help someone! :)