Loading images in a Listview properly

Question

I'm using the Universal Image Loader library to load images in my listview, it loads the images but I notice that if you scroll quickly the first time you can see the wrong images being loaded first before the correct image.

How can I stop this effect. Here is my entire class below.

public MyListAdapter(Context context, List<VenueDetails> m_venue_details) {
    super(context, R.layout.venue_list_row, m_venue_details);

    this.context = context;
    this.venue_details = new ArrayList<VenueDetails>();
    this.venue_details = m_venue_details;
    df = new DecimalFormat("#.##");
}

@SuppressWarnings("deprecation")
@SuppressLint("NewApi")
@Override
public View getView(int position, View v, ViewGroup parent) {

    final ViewHolder holder;
    final VenueDetails vD =  venue_details.get(position);   

    if (inflater == null) {
        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    if (v == null) {
        v = inflater.inflate(R.layout.venue_list_row, parent,false);
        holder = new ViewHolder();
        holder.venue_name = (TextView) v.findViewById(R.id.venue_name);
        holder.venue_dist = (TextView) v.findViewById(R.id.venue_dist);
        holder.curr_loc = (TextView) v.findViewById(R.id.curr_loc);
        holder.ll = (FrameLayout) v.findViewById(R.id.venue_frame);
        holder.pett_btn = (Button) v.findViewById(R.id.venue_pett);
        holder.img = (ImageView) v.findViewById(R.id.venue_logo);

        v.setTag(holder);

    }else{
        holder = (ViewHolder) v.getTag();
    }

    holder.img.setTag(vD.logo);

    if(vD.list_img == null){
        myAppObj.getImageLoader().loadImage(holder.img.getTag().toString(), new ImageLoadingListener() {

            @Override
            public void onLoadingStarted(String imageUri, View view) {
                holder.img.setBackgroundResource(R.drawable.placeholder_venue);
            }

            @Override
            public void onLoadingFailed(String imageUri, View view,
                    FailReason failReason) {    
                holder.img.setBackgroundResource(R.drawable.placeholder_pin);                   
            }

            @Override
            public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                holder.img.setBackgroundDrawable(new BitmapDrawable(loadedImage));
                if(vD.list_img == null){
                    vD.list_img = new BitmapDrawable(loadedImage);
                }
            }

            @Override
            public void onLoadingCancelled(String imageUri, View view) {
                holder.img.setBackgroundResource(R.drawable.placeholder_venue);
            }
        });
    }else{
        holder.img.setBackgroundDrawable(vD.list_img);
    }

    if(vD != null){         

        holder.venue_name.setText(vD.venueName.toUpperCase());
        venue_details.get(position).venue_distance = Double.parseDouble(df.format(Utils.distance(myAppObj.getMyLatitude(), myAppObj.getMyLongitude(), vD.latitude, vD.longitude, 'K') * 0.000621371192));
        holder.venue_dist.setText(df.format(vD.venue_distance)+" Miles");


        holder.venue_curr_loc.setText(my_address.toUpperCase());

        if (vD.petted == 1) {

            holder.pett_btn.setVisibility(View.VISIBLE);
            holder.ll.setVisibility(View.VISIBLE);

            holder.pett_btn.setOnClickListener(new OnClickListener() {
                @Override               
                public void onClick(View v) {                   
                    if(dialog_Callback!=null)
                        dialog_Callback.onDialogCalled(0, vD.id);
                }
            });

        } else {

            holder.pett_btn.setVisibility(View.GONE);
            holder.ll.setVisibility(View.GONE);
        }           
    }

    return v;
}

@Override
public boolean isEnabled(int position) {
    if (venue_details.get(position).petted == 1) {
        return false;
    } else {
        return true;
    }
}

static class ViewHolder{
    TextView venue_name;
    TextView venue_dist;
    TextView venue_curr_loc;
    FrameLayout ll;
    Button pett_btn;
    ImageView img;
}

Answer 1

The best solution would be to use Picasso very easy to use and much better performace