Wrong image show up in my ListView rows

Question

Hello! 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

If you stop using the convertView you get (which you absolutely should), and generate a whole new View to return every time, does it work right? I think the problem is in the way you reuse the views.

Answer 2

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).