ListView custom adapter with Universal Image Loader recycles images wrongly

Question

I've tried to implement the recycling that is advised, as you can see in the code below. The reason is that the ListView lagged when scrolling and recycling the Views is what solved it. However it also caused another problem, which is that the images that are loaded in the ListView items are loaded incorrectly. There are some views that do not have an image and some that do. When going over the ones that do not have an image the UIL sometimes does load a picture of a different item. Also when I keep scrolling up and down the other items without an image get an image attributed to them.

This is the custom ListViewAdapter:

public class CarListViewAdapter extends BaseAdapter {

// Declare Variables
Context context;
String[] name;
String[] owner;
String[] imageUrl;
String[] pricePerKm;
String[] pricePerH;
int amount;
int screenWidth;

ViewHolder viewHolder;

ImageLoader imageLoader;
DisplayImageOptions options;

public CarListViewAdapter(Context context, String[] imageUrl, String[] name, String[] owner,
                          String[] pricePerKm, String[] pricePerH, int amount, int screenWidth) {
    this.context = context;
    this.name = name;
    this.owner = owner;
    this.imageUrl = imageUrl;
    this.pricePerKm = pricePerKm;
    this.pricePerH = pricePerH;
    this.amount = amount;
    this.screenWidth = screenWidth;

    options = new DisplayImageOptions.Builder()
            .cacheOnDisk(true)
            .cacheInMemory(true)
            .bitmapConfig(Bitmap.Config.RGB_565)
            .imageScaleType(ImageScaleType.EXACTLY)
            .resetViewBeforeLoading(true)
            .build();
    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)
            .defaultDisplayImageOptions(options)
            .threadPriority(Thread.MAX_PRIORITY)
            .threadPoolSize(5)
            .diskCacheExtraOptions(screenWidth, Math.round(screenWidth / 2), null)
            .memoryCache(new WeakMemoryCache())
            .denyCacheImageMultipleSizesInMemory()
            .build();
    imageLoader = ImageLoader.getInstance();
    imageLoader.init(config);
}

static class ViewHolder {
    ImageView image;
    TextView nameText;
    TextView ownerText;
    TextView pricePerKmText;
    TextView pricePerHText;
}

public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.car_list, parent, false);            
    }

    viewHolder = new ViewHolder();
    viewHolder.image = (ImageView) convertView.findViewById(R.id.car_image);
    viewHolder.nameText = (TextView) convertView.findViewById(R.id.car_name);
    viewHolder.ownerText = (TextView) convertView.findViewById(R.id.car_owner);
    viewHolder.pricePerKmText = (TextView) convertView.findViewById(R.id.car_price_km);
    viewHolder.pricePerHText = (TextView) convertView.findViewById(R.id.car_price_h);

    viewHolder.image.getLayoutParams().width = screenWidth;
    viewHolder.image.getLayoutParams().height = Math.round(screenWidth / 2);
    viewHolder.image.requestLayout();

    if (imageUrl[position] != null) {
        imageLoader.displayImage(imageUrl[position], viewHolder.image);
    }

    viewHolder.nameText.setText(name[position]);
    viewHolder.ownerText.setText(owner[position]);
    viewHolder.pricePerKmText.setText(pricePerKm[position]);
    viewHolder.pricePerHText.setText(pricePerH[position]);

    return convertView;
}


@Override
public int getCount() {
    return amount;
}

@Override
public Object getItem(int position) {
    return null;
}

@Override
public long getItemId(int position) {
    return 0;
}

Answer 1

When going over the ones that do not have an image the UIL sometimes does load a picture of a different item.

that's the expect behavior, since you are setting an item only if imageUrl[position] != null. Try having a place holder for the position where imageUrl[position] is null or hide the view. This way you will not have this kind of artifacts.

 if (imageUrl[position] != null) {
     imageLoader.displayImage(imageUrl[position], viewHolder.image);
 } else {
    viewHolder.image.setImageResource(R.drawable.place_holder);
 }