Duplicate items in GridView when using ImageLoader library

Question

I'm using GridView to display a list of ImageViews. Images are loaded from the Internet via ImageLoader library. I also implemented a custom adapter (which extends BaseAdapter):

public class ImagePreviewAdapter extends BaseAdapter {

    private Context mContext;

    private List<LastPost> mPosts = new ArrayList<LastPost>();

    private ImageLoader mImageLoader;

    private ImageLoadingListener mLoadingListener;

    public ImagePreviewAdapter(Context context, List<LastPost> posts, ImageLoadingListener listener) {
        this.mContext = context;
        this.mPosts = posts;
        this.mLoadingListener = listener;

        Activity activity = (Activity)mContext;
        this.mImageLoader = ((MeanwhileInRussia)activity.getApplication()).getImageLoader();
    }

    public int getCount() {
        return mPosts.size();
    }

    public LastPost getItem(int position) {
        return mPosts.get(position);
    }

    public long getItemId(int position) {
        LastPost post = mPosts.get(position);
        return Long.parseLong(post.getId());
    }

    public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView;

        // if it's not recycled, initialize some attributes
        if (convertView == null) {
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(125, 125));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(0, 0, 0, 0);

            String imageLink = mPosts.get(position).getImageurl();
            DisplayImageOptions displayImgOptions = ImageLoaderConfigUtil
                .getDisplayImageOptions(mContext);

            if (mLoadingListener != null) {
                mImageLoader
                    .displayImage(imageLink, imageView, displayImgOptions, mLoadingListener);
           } else {
                mImageLoader.displayImage(imageLink, imageView, displayImgOptions);
           }

        } else {
            ImageView restoringView = (ImageView)convertView;
            imageView = restoringView;
        }

        return imageView;
    }
}

Every time when system calls the getView() method I create a new ImageView object and ask ImageLoader to put image in it (if convertView == null of course). For the first portion of URLs everything works fine. But my problems start for second portion: there are no new images in GridView, just copies of the first portion... I've realized that problem hides somewhere in the convertView == null: for all theoretically new elements this checking always equals FALSE! And instead of creating new object and loading image from URL my code puts some OLD object into new positions. Interesting fact: getItemId(position) method returns correct ID for my LastPost object. Does it mean that I just have incorrect views in adapter for correct LastPosts objects?

Any suggestions? Thanks!

Answer 1

try this....

public class ImagePreviewAdapter extends BaseAdapter 
{

private Context mContext;

private List<LastPost> mPosts = new ArrayList<LastPost>();

private ImageLoader mImageLoader;

private ImageLoadingListener mLoadingListener;

/**
 * Constructor
 * 
 * @param context
 * @param posts
 * @param listener - using for showing loading progress
 */
public ImagePreviewAdapter(Context context, List<LastPost> posts, ImageLoadingListener listener) {
    this.mContext = context;
    this.mPosts = posts;
    this.mLoadingListener = listener;

    Activity activity = (Activity)mContext;
    this.mImageLoader = ((MeanwhileInRussia)activity.getApplication()).getImageLoader();
}

public int getCount() {
    return mPosts.size();
}

public LastPost getItem(int position) {
    return mPosts.get(position);
}

public long getItemId(int position) {
    LastPost post = mPosts.get(position);
    return Long.parseLong(post.getId());
}

/*
 * Create a new ImageView for each item referenced by the Adapter
 */
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;

    // if it's not recycled, initialize some attributes
    if (convertView == null) {
        imageView = new ImageView(mContext);
        imageView.setLayoutParams(new GridView.LayoutParams(125, 125));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setPadding(0, 0, 0, 0);

    } 
   else 
      {
        ImageView restoringView = (ImageView)convertView;
        imageView = restoringView;
     }
        final String imageLink = mPosts.get(position).getImageurl();
        final DisplayImageOptions displayImgOptions = ImageLoaderConfigUtil
            .getDisplayImageOptions(mContext);

   if (mLoadingListener != null) 
    {
       mImageLoader.displayImage(imageLink, imageView,displayImgOptions,mLoadingListener);
       }
     else 
        {
            mImageLoader.displayImage(imageLink, imageView, displayImgOptions);
       }

    return imageView;
}
}

Answer 2

try this

public View getView(int position, View convertView, ViewGroup parent) {

   ViewHolder holder = null;
    // if it's not recycled, initialize some attributes
    if (convertView == null) {
        holder = new ViewHolder();
        holder.image = new ImageView(mContext);
        holder.image.setLayoutParams(new GridView.LayoutParams(125, 125));
        holder.image.setScaleType(ImageView.ScaleType.CENTER_CROP);
        holder.image.setPadding(0, 0, 0, 0);
        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }

    String imageLink = mPosts.get(position).getImageurl();
    DisplayImageOptions displayImgOptions = ImageLoaderConfigUtil.getDisplayImageOptions(mContext);
    mImageLoader.displayImage(imageLink, holder.image, displayImgOptions);

    return convertView;
}


protected class ViewHolder{
    ImageView image;
}