Android. Uploading images to the list. Why is this happening and how to fix it?

Question

Android

There is a list with images. Adapter code:

public class InventoryAdapter extends RecyclerView.Adapter<InventoryAdapter.Holder> {

    public static final String TAG = "InventoryAdapter";

    private ImageLoader imageLoader;
    private JSONArray data;

    public InventoryAdapter(ImageLoader imageLoader, JSONArray data) {
        this.imageLoader = imageLoader;
        this.data = data;
    }

    @Override
    public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.inventory_list_item, parent, false);
        Holder holder = new Holder(view);
        holder.image = (ImageView) view.findViewById(R.id.inventory_item_image);
        return holder;
    }

    @Override
    public void onBindViewHolder(final Holder holder, int position) {
        try {
            JSONObject item = data.getJSONObject(position);
            final String uri = "https://steamcommunity-a.akamaihd.net/economy/image/class/730/"
                    + item.getString("classid") + "/70fx70f";
            imageLoader.loadImage(uri, new SimpleImageLoadingListener() {
                @Override
                public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                    holder.image.setImageBitmap(loadedImage);
                }
            });
        } catch (JSONException e) {
            e.printStackTrace();
        }
    }

    @Override
    public int getItemCount() {
        return data.length();
    }

    public static class Holder extends RecyclerView.ViewHolder {
        public ImageView image;
        public Holder(View itemView) {
            super(itemView);
        }
    }

}

The problem is visible on the gif (images are replaced while scrolling):

This library is used to load images: https://github.com/nostra13/Android-Universal-Imag...

Answer 1

This is due to the fact that already unnecessary (those that have scrolled off the screen) images are placed in reused views. What to do - throw out UIL (I really don't like it), take a normal Glide or Picasso.
Another option is to store the last requested url in the ImageView tag, store it in the callback, compare it, and if they do not match, do not set the image.
IMHO, the first option is better.