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 file as the place holder like:

Picasso.with(context)
    .load(url)
    .placeholder(R.drawable.user_placeholder)
    .into(imageView);

So, how can I use a thumbnail URL as the placeholder? , and if I should use Picasso twice, then how?

An issue is already opened on Picasso's github page with this request, but seems it won't be added to Picasso as per JakeWharton. So how could we do it with what's available in hand?

Answer 1

Thanks to raveN here & the comments on the original request on github, finally I've got a working solution:

Picasso.with(context)
       .load(thumb) // thumbnail url goes here
       .into(imageView, new Callback() {
            @Override
            public void onSuccess() {
                Picasso.with(context)
                        .load(url) // image url goes here
                        .placeholder(imageView.getDrawable())
                        .into(imageView);
            }
            @Override
            public void onError() {

            }
        });

The trick here is to get the drawable from the imageView (which is the thumbnail) after the first call & pass it as a placeholder to the second call

-- update --

I've made a blog post describing the whole scenario