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