RecyclerView: Async image-loading

Due to view reuse you'll fetch views with content already on them, this was a problem on ListViews too if you were using the ViewHolder pattern, which you should.

There are two solutions here, the good practice and the bad hack:

• In the good practice you set your ImageView to display nothing at the beginning of bindViewHolder(VH holder, int position) using setDrawable(null) or similar.

• In the bad hack you wouldn't recycle/reuse views, not enforcing the ViewHolder pattern, and you'd inflate it every time, but that's only allowed in ListView and other old components.

You should check the universal image loader. It has memory cache, disk cache and it loads your images asynchronously so doesn't block the ui. You can set default image and/or failed to fetch image etc. It can sample down your image to decrease the memory footprint of the bitmap. I really recommend you to use it for images.

Do not disable recyclable for your case because it is pointless. Images must be recycled because their bitmap drawables generate very high memory overload if not properly sampled.

Sample usage in RecyclerViewAdapter:

@Override
public void onBindViewHolder(CustomViewHolder viewHolder, int position) {
    String imageUri = "";//local or remote image uri address
    //viewHolder.imgView: reference to your imageview
    //before you call the displayImage you have to 
    //initialize imageloader in anywhere in your code for once.   
    //(Generally done in the Application class extender.)
    ImageLoader.getInstance().displayImage(imageUri, viewHolder.imgView);
}

edit: Nowadays, I consider Glide as my main image loading and caching library. You can use it like this:

Glide.with(context)
    .load(imageUri)
    .placeholder(R.drawable.myplaceholder)
    .into(imageView);