Asynchronous loading of images in gridview

Question

Currently am using Zonghai-li's android-http-image-manager but the problem I am facing is that when the image is getting downloaded and at that moment when I scroll the grid-view list, that image get displayed in some other grid-cell. Can someone help me out with this issue..?

This is my adapter class :

package com.syncusup.list.adapters;

import java.io.File;
import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Environment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Filter;
import android.widget.ImageView;
import android.widget.TextView;

import com.syncusup.R;
import com.syncusup.UILApplication;
import com.syncusup.httpimageloader.HttpImageManager;
import com.syncusup.model.VCard;
import com.syncusup.utils.SyncLocalDatabase;

public class LocalContactsAdapter extends ArrayAdapter<VCard> {

    private LayoutInflater mInflater;

    private ArrayList<VCard> mOriginalList;

    private ArrayList<VCard> mContactList;

    private HttpImageManager mHttpImageManager;

    private MyFilter mFilter;

    private Context mContext;

    private File aFileToCheck;

    public LocalContactsAdapter(Context iContext, ArrayList<VCard> iVcardsArray) {
        super(iContext, R.layout.localcontacts_row, iVcardsArray);
        this.mContactList = new ArrayList<VCard>();
        this.mContactList.addAll(iVcardsArray);
        this.mOriginalList = new ArrayList<VCard>();
        this.mOriginalList.addAll(iVcardsArray);
        this.mContext = iContext;
        mHttpImageManager = ((UILApplication)((Activity)mContext).getApplication())
                .getHttpImageManager();
    }

    private class ViewHolder {
        public TextView aContactName;

        public TextView aContact;

        public ImageView aContactImage;
    }

    @Override
    public Filter getFilter() {
        if (mFilter == null) {
            mFilter = new MyFilter();
        }
        return mFilter;
    }

    @Override
    public int getPosition(VCard iItem) {
        return super.getPosition(iItem);
    }

    @Override
    public int getCount() {
        return mContactList.size();
    }

    @Override
    public VCard getItem(int iPosition) {
        return mContactList.get(iPosition);
    }

    @Override
    public long getItemId(int iPosition) {
        return iPosition;
    }

    @Override
    public View getView(final int iPosition, View iConvertView, ViewGroup iParent) {

        final ViewHolder aHolder;
        aFileToCheck = new File(Environment.getExternalStorageDirectory() + "/SyncUsUp/",
                SyncLocalDatabase.computeHashedName(mContactList.get(iPosition).getID()));

        if (iConvertView == null || iConvertView.getTag() == null) {
            // default layout inflater
            mInflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            iConvertView = mInflater.inflate(R.layout.localcontacts_row, null);
            aHolder = new ViewHolder();
            aHolder.aContactName = (TextView)iConvertView.findViewById(R.id.tvMyContactName);
            aHolder.aContact = (TextView)iConvertView.findViewById(R.id.tvMyContact);
            aHolder.aContactImage = (ImageView)iConvertView.findViewById(R.id.ivContact);
            iConvertView.setTag(aHolder);
        } else {
            aHolder = (ViewHolder)iConvertView.getTag();
        }

        ImageView aImageView = aHolder.aContactImage;
        aImageView.setImageResource(R.drawable.contact_box_blanktile);

        try {
            if (mContactList.get(iPosition).getPhoto() != null) {
                Bitmap aBitmap = mHttpImageManager.loadImage(new HttpImageManager.LoadRequest(Uri
                        .parse(mContactList.get(iPosition).getPhoto().getUrl()), aImageView));
                if (aBitmap != null) {
                    aImageView.setImageBitmap(aBitmap);
                }
            } else if (aFileToCheck.exists()) {
                Bitmap aBitmap = mHttpImageManager.loadImage(new HttpImageManager.LoadRequest(Uri
                        .parse(mContactList.get(iPosition).getID()), aImageView));
                if (aBitmap != null) {
                    aImageView.setImageBitmap(aBitmap);
                }

            }
        } catch (Exception iException) {
            iException.printStackTrace();
        }

        if (mContactList.get(iPosition).getFullName() != null) {
            aHolder.aContactName.setText(mContactList.get(iPosition).getFullName());
        } else {
            aHolder.aContactName.setText("No Name");
        }

        return iConvertView;
    }

    private class MyFilter extends Filter {

        @Override
        protected FilterResults performFiltering(CharSequence iConstraint) {

            FilterResults aResult = null;
            try {
                iConstraint = iConstraint.toString().toLowerCase();
                aResult = new FilterResults();
                if (iConstraint != null && iConstraint.toString().length() > 0) {
                    ArrayList<VCard> aFilteredItems = new ArrayList<VCard>();

                    for (int i = 0, l = mOriginalList.size(); i < l; i++) {
                        VCard aList = mOriginalList.get(i);
                        if (aList.getFullName() != null) {
                            if (aList.getFullName().toString().toLowerCase().contains(iConstraint))
                                aFilteredItems.add(aList);
                        }
                    }
                    aResult.count = aFilteredItems.size();
                    aResult.values = aFilteredItems;
                } else {
                    synchronized (this) {
                        aResult.values = mOriginalList;
                        aResult.count = mOriginalList.size();
                    }
                }
            } catch (Exception iException) {
                iException.printStackTrace();
            }
            return aResult;
        }

        @SuppressWarnings("unchecked")
        @Override
        protected void publishResults(CharSequence iConstraint, FilterResults iResults) {
            try {
                mContactList = (ArrayList<VCard>)iResults.values;
                notifyDataSetChanged();
                clear();
                for (int i = 0, l = mContactList.size(); i < l; i++)
                    add(mContactList.get(i));
                notifyDataSetInvalidated();
            } catch (Exception iException) {
                iException.printStackTrace();
            }
        }
    }
}

Answer 1

This issue is due to view reusing by the grid. That is, the views used to display data in first page of grid is reused to show data when it is called. Actually, the image downloading library should handle this change and do it correctly. Better to go for another library to lazy load images.