imageandroid-recyclerviewimage-loadingprogressive-download

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


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).


Solution

  • 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