ListView images are not displaying in their order

Question

I am using Universal Image Loader to display thumbnails in my listView but when i quicklly scroll up/down images get inter-changed which is annoying please help me throught it.. thanks My DisplayImage config:

 DisplayImageOptions displayimageOptions = new   DisplayImageOptions.Builder().cacheInMemory(true).bitmapConfig(Bitmap.Config.RGB_565).
            delayBeforeLoading(1000) .cacheOnDisc(true).imageScaleType(ImageScaleType.EXACTLY)
            .resetViewBeforeLoading().build();

And ImageLoader config:

ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getApplicationContext())
    .threadPoolSize(15) 
    .threadPriority(Thread.NORM_PRIORITY) // default
    .tasksProcessingOrder(QueueProcessingType.FIFO) // default
    .memoryCacheSize(20 * 1024 * 1024)
    .memoryCacheSizePercentage(25) // default
    .discCacheSize(20 * 1024 * 1024)
    .discCacheFileCount(100)
    .discCacheFileNameGenerator(new HashCodeFileNameGenerator()) // default
    .build();

    ImageLoader.getInstance().init(config);

Adapter's getView():

public View getView(int position, View convertView, ViewGroup parent) {
    View vi=convertView;
    if(convertView==null){
        vi = inflater.inflate(R.layout.list_layout, null);
    }
    TextView title = (TextView)vi.findViewById(R.id.tv2); // title
    final ImageView thumb_image=(ImageView)vi.findViewById(R.id.img); // thumb image

    HashMap<String, String> song = new HashMap<String, String>();
    song = data.get(position);

    // Setting all values in listview
    title.setText(song.get(DisplayMessage.KEY_TITLE));
    Log.w(null, song.get(DisplayMessage.KEY_THUMB_URL));
    ImageLoader imageLoader = ImageLoader.getInstance();
    Log.w("null",song.get(DisplayMessage.KEY_THUMB_URL));
    ImageSize targetSize = new ImageSize(70, 70);
  final  ImageAware imageAware = new ImageViewAware(thumb_image, false);
   // Utils.imageLoader.displayImage("file:///"+song.get(DisplayMessage.KEY_THUMB_URL), imageAware);
    imageLoader.loadImage("file:///"+song.get(DisplayMessage.KEY_THUMB_URL), targetSize, new SimpleImageLoadingListener() {
        @Override
        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
            // Do whatever you want with Bitmap
            imageAware.setImageBitmap(ThumbnailUtils.extractThumbnail(loadedImage, 70, 70));
        }
    });

    return vi;
}

Answer 1

In your getView() method just remove this if(convertView==null) condition and than try to run again. Just do like below-

public View getView(int position, View convertView, ViewGroup parent) {
View vi=convertView;
//if(convertView==null){
    vi = inflater.inflate(R.layout.list_layout, null);
//}
TextView title = (TextView)vi.findViewById(R.id.tv2); // title
final ImageView thumb_image=(ImageView)vi.findViewById(R.id.img); // thumb image

HashMap<String, String> song = new HashMap<String, String>();
song = data.get(position);

// Setting all values in listview
title.setText(song.get(DisplayMessage.KEY_TITLE));
Log.w(null, song.get(DisplayMessage.KEY_THUMB_URL));
ImageLoader imageLoader = ImageLoader.getInstance();
Log.w("null",song.get(DisplayMessage.KEY_THUMB_URL));
ImageSize targetSize = new ImageSize(70, 70);
final  ImageAware imageAware = new ImageViewAware(thumb_image, false);
 // Utils.imageLoader.displayImage("file:///"+song.get(DisplayMessage.KEY_THUMB_URL), 
imageAware);
imageLoader.loadImage("file:///"+song.get(DisplayMessage.KEY_THUMB_URL), targetSize, new      
 SimpleImageLoadingListener() {
    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        // Do whatever you want with Bitmap
        imageAware.setImageBitmap(ThumbnailUtils.extractThumbnail(loadedImage, 70, 70));
    }
});
return vi;
}