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?

question from:https://stackoverflow.com/questions/22143157/android-picasso-placeholder-and-error-image-styling

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!