Android ListView Universal Image Loader Changes Images on Scroll

Question 1

please be specific during using and dealing with the image loader class. If possible, don't create more instance of the same class. Instead of use the same instance in different way.

See below adapter class and try to integrate same in your case. which will help you.

 private class OrderAdapter extends ArrayAdapter<User> {
        private ArrayList<User> items;
        Activity a;
        public ImageLoader imageLoader;

        public OrderAdapter(Context context, int textViewResourceId,ArrayList<User> items) {
            super(context, textViewResourceId, items);
            this.items = items;
            // extra
            /*if (Utility.model == null) {
                Utility.model = new FriendsGetProfilePics();
            }
            Utility.model.setListener(this);*/
        }

        /*@Override
        public boolean isEmpty() {
            // TODO Auto-generated method stub
            super.isEmpty();
            return false;
        }*/

        @Override
        public View getView(final int position, View convertView,ViewGroup parent) {
            ViewHolder holder;
            View v = convertView;
            if (v == null) {
                LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

                v = vi.inflate(R.layout.add_buddies_row_new, null);
                holder = new ViewHolder();
                imageLoader = new ImageLoader(NotificationsActivity.this);
                //--------------

                //---------------------------------------------------------------------
                // for head to head
                holder.userName = (TextView) v.findViewById(R.id.txtName);
                holder.userPic = (ImageView) v.findViewById(R.id.imgUserPic);
                holder.userCity = (TextView) v.findViewById(R.id.txtCity);
                holder.userState = (TextView) v.findViewById(R.id.txtstate);
                holder.userCountry = (TextView) v.findViewById(R.id.txtContry);
                //---------------------------------------------------------------------

                v.setTag(holder);

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

            final User o = items.get(position);
            holder = (ViewHolder) v.getTag();

            if (o != null) {
                holder.userName.setText(o.getUserName());
                holder.userCity.setText(o.getUserCity()+", ");
                holder.userState.setText(o.getUserState()+", ");
                holder.userCountry.setText(o.getUserCountry());
                System.out.println("PIC: "+o.getUserPic());
                holder.userPic.setTag(o.getUserPic());
                imageLoader.DisplayImage(o.getUserPic(), a, holder.userPic);
            }
            return v;
        }
    }

    class ViewHolder {
        TextView userName ;
        TextView userCity;
        TextView userState;
        TextView userCountry;
        ImageView userPic ;
    }

Comment me for any dought.

Note: YOU HAVE TO DO SOME CHANGES IN ABOVE CODE AS PER YOUR REQUIREMENT.

If your issue not solve with this then let me know.

It can also happend if you are getting null data so please be confirm with getting data.

Question 2

I know it's been a while since the topic was created but my solution for the NPE of @Wenger occured because I've used findViewById on the View member called v instead of the ViewHolder:

holder.userName = (TextView) v.findViewById(R.id.txtName);

Working reference:

holder.userName = (TextView) convertView.findViewById(R.id.txtName);

Question 3

I had same issue with view holder pattern and universal image loader.

I was checking my url before i call universal loader display image and if url was null i dit not download image just set imageview background drawable my no image drawable. On Listview scroll my listview images were mixed.

Then i tried to do not check url if its null and just set a no url drawable to universal image loader display image options. This fixed my problem. I don't know if it's a commont solution for this problem but you can try it.

Question 4

First of all, consider using view types - getViewTypeCount() & getItemViewType(int position) - ListView wont respect your different views - more info: how ListView recycling works.

Also, just dont parse json in getView() - do it where you are getting it.

Also (as notted above), you should init the ImageLoader only once - perfect place to do so is your Application's onCreate(). Then, you call it - ImageLoader.getInstance().loadSmth();

Also, do something with your code formatting - it's awful mess. As a tip:

        final int viewType = getItemViewType(position);
        final int layoutResId;
        switch (viewType) {
            case 0:
                layoutResId = R.layout.layout_1;
                break;
            case 1:
                layoutResId = R.layout.layout_2;
                break;
            default:
                layoutResId = R.layout.layout_3;
        }

        final View view = mInflater.inflate(layoutResId, group, false);

Question 5

There are few fixes you can do

Your view holder is almost useless. You have to use it as follow

ViewHolder viewHolder;
if (view == null) {
    viewHolder = new ViewHolder();    
    viewHolder.image = (ImageView) view.findViewById(R.id.capsule_media_list_item_thumbnail_1);             
    view.setTag(viewHolder);    
}else{
 viewHolder =  view.getTag(viewHolder); 
}

You should declare the ImageLoader and DisplayImageOptions instance only once. Probably in constructor.

ImageLoader imageLoader = ImageLoader.getInstance();
DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory(true)
        .cacheOnDisc(true).resetViewBeforeLoading(true)
        .showImageForEmptyUri(fallbackImage)
        .showImageOnFail(fallbackImage)
        .showImageOnLoading(fallbackImage).build();