RecyclerView Lazy Loading (Universal Image Loader)

Question

Using Android Universal Image Loader and RecyclerView to asynchronously load images, I'm getting the same error as other people, where the images get mixed up; until they have all loaded an are cached.

Code for the adapter:

import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.media.Image;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;

import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.FailReason;
import com.nostra13.universalimageloader.core.listener.ImageLoadingListener;
import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener;
import com.nostra13.universalimageloader.utils.MemoryCacheUtils;

import java.net.URI;
import java.net.URISyntaxException;
import java.util.Arrays;
import java.util.HashSet;
import java.util.LinkedHashSet;
import java.util.List;
import java.util.Set;

import romina.theftest.connectivity.ImgDownloader;

/**
 * Created by romin on 18/1/2016.
 */
public class ProductRecyclerViewAdapter extends RecyclerView.Adapter {
    private List<Product> mValues;
    private Context mContext;
    private View.OnClickListener mListener;
    // Allows to remember the last item shown on screen
    private int lastPosition = -1;
    private final String OLD_DOMAIN = "";
    private final String NEW_DOMAIN = "";

    public ProductRecyclerViewAdapter(Context mContext, View.OnClickListener mListener) {
        this.mContext = mContext;
        this.mListener = mListener;
    }

    public ProductRecyclerViewAdapter(List<Product> mValues, Context mContext, View.OnClickListener mListener) {
        this(mContext, mListener);
        this.mListener = mListener;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.product_list_item, parent, false);

        Log.d(ProductRecyclerViewAdapter.class.getSimpleName(), "onCreateViewHolder");
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ViewHolder actualViewHolder = (ViewHolder) holder;
        actualViewHolder.mItem = mValues.get(position);
        actualViewHolder.mIdView.setText("" + mValues.get(position).getName());
        Log.d(ProductRecyclerViewAdapter.class.getSimpleName(), "onBindViewHolder pos " + position);

        ImageLoader imageLoader = ImageLoader.getInstance(); // Get singleton instance
        final String finalImgURL = mValues.get(position).getImgURL().toString().replaceAll(OLD_DOMAIN, NEW_DOMAIN);
            imageLoader.displayImage(finalImgURL, actualViewHolder.mImgView);

        setAnimation(actualViewHolder.mContentView, position);
    }

    public void setDataSet(List<Product> newValues) {
        mValues = newValues;
        notifyDataSetChanged();
    }


    @Override
    public int getItemCount() {
        return mValues == null ? 0 : mValues.size();
    }

    /**
     * Here is the key method to apply the animation
     */
    private void setAnimation(View viewToAnimate, int position) {
        // If the bound view wasn't previously displayed on screen, it's animated
        if (position > lastPosition) {
            Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.slide_in_left);
            viewToAnimate.startAnimation(animation);
            lastPosition = position;
        }
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        public final View mView;
        public final TextView mIdView;
        public final ImageView mImgView;
        public final TextView mContentView;
        public Product mItem;

        public ViewHolder(View view) {
            super(view);
            mView = view;
            mIdView = (TextView) view.findViewById(R.id.product_quantity_title);
            mContentView = (TextView) view.findViewById(R.id.product_quantity_title);
            mImgView = (ImageView) view.findViewById(R.id.product_quantity_image);

            mView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (null != mListener) {
                        mListener.onClick(v);
                    }
                }
            });
        }

        @Override
        public String toString() {
            return super.toString() + " '" + mContentView.getText() + "'";
        }
    }
}

I know it has to be something in onBindViewHolder , since it's called for updating every view but I'm not updating the ImageView properly.

It doesn't have to do with the library. The same behaviour was happening when doing lazy loading without caching the images. The error is because I don't know how to update the ImageView in onBindViewHolder .

Thanks!

Answer 1

You need to make sure you init the ImageLoader only once in the App. Create a class and extend it with Application and then put in the AndroidManifest.xml like:

<application
        android:name=".App"
.../>

Application class

public class App extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        // UNIVERSAL IMAGE LOADER SETUP
        DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()
                .resetViewBeforeLoading(true)
                .cacheOnDisk(true)
                .cacheInMemory(true)
                .imageScaleType(ImageScaleType.EXACTLY)
                .displayer(new FadeInBitmapDisplayer(300))
                .build();

        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getApplicationContext())
                .defaultDisplayImageOptions(defaultOptions)
                .memoryCache(new WeakMemoryCache())
                .diskCacheSize(100 * 1024 * 1024)
                .build();

        ImageLoader.getInstance().init(config);
        // END - UNIVERSAL IMAGE LOADER SETUP
    }
}

For onBindViewHolder which you want to know:

@Override
public void onBindViewHolder(final CategoryHolder holder, final int i) {

    holder.categoryImage.setImageBitmap(null);

    if (mRow.get(i).getImage() != null && !mRow.get(i).getImage().equals("")) {
        final File image = DiskCacheUtils.findInCache(mRow.get(i).getImage(), imageLoader.getDiskCache());
        if (image!= null && image.exists()) {
            Picasso.with(getActivity()).load(image).fit().centerCrop().into(holder.categoryImage);
        } else {
            imageLoader.loadImage(mRow.get(i).getImage(), new ImageLoadingListener() {
                @Override
                public void onLoadingStarted(String s, View view) {
                    holder.categoryImage.setImageBitmap(null);
                }

                @Override
                public void onLoadingFailed(String s, View view, FailReason failReason) {

                }

                @Override
                public void onLoadingComplete(String s, View view, final Bitmap bitmap) {
                    Picasso.with(getActivity()).load(s).fit().centerCrop().into(holder.categoryImage);

                }

                @Override
                public void onLoadingCancelled(String s, View view) {

                }
            });
        }
    }else {
        holder.categoryImage.setImageBitmap(null);
    }

    holder.categoryName.setText(mRow.get(i).getName().toUpperCase());

}