Wrong image show up in my ListView rows

Question

I use this code in my getView:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View v = convertView;
    if (v == null) {

        LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = vi.inflate(R.layout.listrow, null);
    }
    Order o = items.get(position);

    if (o != null) {
        TextView tt = (TextView) v.findViewById(R.id.toptext);
        ImageView thumb = (ImageView) v.findViewById(R.id.icon);

        if (o.getOrderDrawable() != null) {
            thumb.setImageDrawable(o.getOrderDrawable());
        } else {
            tt.setText(o.getOrderTitle());
        }

    }
    return v;
}

The problem is when scrolling; sometimes the correct image shows, but sometimes when scrolling back/forward, the images shows randomly and that is not associated with the row.

The images are downloaded from the web.

How should I solve this problem?

Answer 1

Android's ListView reuses list items when they aren't need anymore. For this reason, you need to make sure all views that should change, will actually get changed.

Your problem is that if you don't find a drawable for the current list item, you don't empty nor hide the ImageView. You should do thumb.setImageDrawable(null) in that case, or thumb.setVisibility(View.GONE).