Use a thumbnail as a placeholder for Picasso

Question

From the UX point of view, it will be great to show the user a thumbnail first until the real image completes loading, then showing it to him, but Picasso uses only a resource f

Answer 1

You could write a simple helper which calls Picasso twice (as you mentioned).

I've not tested it, but it should go like

Picasso.with(context)
        .load(thumbnailUrl)
        .error(errorPlaceholderId)
        .into(imageView, new Callback() {
                        @Override
                        public void onSuccess() {
                                // TODO Call Picasso once again here
                        }

                        @Override
                        public void onError() {                             
                    }
            );

There are a couple of different ways to get your Picasso called twice. One method I could think of (again, not tested) is

public static void loadImageWithCallback(String url, Callback callback) {
    Picasso.with(context)
        .load(url)
        .error(errorPlaceholderId)
        .into(imageView, callback);
}

public static void loadImage(String url) {
    Picasso.with(context)
        .load(url)
        .error(errorPlaceholderId)
        .into(imageView);
}

loadImageWithCallback("http://example.com/mythumbnail.jpg", new Callback() {

                    @Override
                    public void onSuccess() {
                        loadImage("http://example.com/myRealImage.jpg");    
                    }

                    @Override
                    public void onError() {                             
                }
}

Edit: All I know is that Picasso provides this callback mechanism. I'm using it in my app to hide a ProgressBar that is displayed until the image is loaded. I'll hide it in success or error callbacks - so you'll have the option to get notified when image loading is done. Then you can simply call it again. I hope the above approach works.