How to load low quality and then high quality image afterwards in android (just like WhatsApp profile image)

Question

I am searching for a design pattern i can use so that in android recyclerView i can load images quickly at low quality and then also make a call to for a high quality image will will write over the low quality image afterwards . I see it often where a low quality image is loaded first and then the high quality appears after.

But How is this done in the adapter for the recycler view. right now i am using picasso for cache and image loading. so for example here is a link to a low quality image:

http://example.com/lowQuality.jpg and likewise high quality http://example.com/highQuality.jpg

So in my adapter for the recyclerView if i do this in the viewholder:

public class SearchItemHolder extends RecyclerView.ViewHolder  {

        @BindView(R.id.iv)
        ImageView iv;

        @BindView(R.id.tv_description)
        TextView tv_description;

        public SearchItemHolder(View view) {
            super(view);
            ButterKnife.bind(this, view);
        }

        public void bindSearch(final SearchModel searchModel) {

            String description = searchModel.getProductName();
            final String imageLowQualityIDUrl = searchModel.getIdLowQualityImage();
            final String imageHighQualityIDUrl = searchModel.getIdHighQualityImage();

            tv_price.setText(price);
            tv_description.setText(description);



            Picasso.with(mContext).load(imageLowQualityIDUrl).into(iv);
//but how to switch it to high quality URL after its finished loading ?


        }
    }

so to be clear, i want that the low quality image can show first as long as the high quality image is not loaded yet.

Update :What i really want is that effect i see on apps where the low quality image loads quickly then after a few seconds it transitions to a higher quality. If there is another tool or way to do this let me know. I want the same effect as the whatsapp profile image (how it fades in from poor quality to good quality).

Answer 1

I found solution with Glide. You can specify low resolution image to be loaded as thumbnail. All you need is:

private void loadImageThumbnailRequest() {  
// setup Glide request without the into() method
DrawableRequestBuilder<String> thumbnailRequest = Glide
    .with( context )
    .load( yourData.getLowQualityLink() );

// pass the request as a a parameter to the thumbnail request
Glide
    .with( context )
    .load( yourData.getHdUrl() )
    .thumbnail( thumbnailRequest )
    .into( imageView );
}

More info in source here

Answer 2

I think I understand, you want an effect just like WhatsApp profile pic. I think the process depends on your backend, there should be a method in your back end that resizes/compresses the original picture by default and another method that keeps the original size image.

example psuedocode for server

$image = image.jpg

$requestLowQuality = resizeThis($image)

 $requestHighQuality = $image.

So when your app loads the pic in background, the Async task request for $requestLowQuality ..it loads the low quality default version. But when user clicks to view, an Asynctask requests to the server for $requestHighQuality

I think this is how WhatsApp does. That's why you have to wait a while for blurred pictured to become quality.

Picasso will just load the images based on the request methods

Goodluck bro

Answer 3

i also found out how to do it from Fresco:

Uri lowResUri, highResUri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setLowResImageRequest(ImageRequest.fromUri(lowResUri))
    .setImageRequest(ImageRequest.fromUri(highResUri))
    .setOldController(mSimpleDraweeView.getController())
    .build();
mSimpleDraweeView.setController(controller);

seems to be the same idea as glide. this info is from fresco docs.