Custom ArrayAdapter shows duplicate images after scrolling

Question

I am new to android and by using ArrayAdapter, I am trying to create a listView with title and image. I am getting the images from sqlite databae.(I know, it is not recommended), but so far I am able to create the desired listView.

There are some items in listView, which do not have image and some have images, the problem I am having is when I scroll up and down then my image gets duplicated. The ones that do not have image gets the random image from the list.

I have searched the web and found related threads, but that didn't fix my problem.

My ArrayAdapter code:

public class CustomListViewAdapter extends ArrayAdapter<DataItems> 
{
  Context context;
  LayoutInflater mInflater;

  public CustomListViewAdapter(Context context, int resourceId, List<DataItems> items) 
  {
    super(context, resourceId, items);
    this.context = context;
    mInflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
  }

  /* private view holder class */
  private class ViewHolder 
  {
     ImageView thumdnail;           
     TextView txtTitle;
  } 

  public View getView(int position, View convertView, ViewGroup parent)
  {
    ViewHolder holder = null;
    DataItems rowItem = getItem(position);

    if (convertView == null) 
    {
      holder = new ViewHolder();

      convertView = mInflater.inflate(R.layout.list_item2, null, false);

      holder.thumdnail = (ImageView) convertView.findViewById(R.id.thumbnail2); 
      holder.txtTitle = (TextView) convertView.findViewById(R.id.mytitle2);

      convertView.setTag(holder);
    }
    else
    {
      holder = (ViewHolder) convertView.getTag();
    }


    holder.txtTitle.setText(rowItem.getTitle());

    if(rowItem.getThumbnailImageId() != null)
    {
      // here getImage() is converting byte array to bitmap

      Bitmap b2 = getImage(rowItem.getThumbnailImageId());
      Drawable drawable2 = new BitmapDrawable(b2);
      holder.thumdnail.setBackground(drawable2);
    }

    return convertView;

}

Could you please tell me, what am I doing wrong here?

hint: what happens when `rowItem.getThumbnailImageId() == null` ? — njzk2, Oct 31 '14 at 15:53
possible duplicate of [How ListView's recycling mechanism works](http://stackoverflow.com/questions/11945563/how-listviews-recycling-mechanism-works) — njzk2, Oct 31 '14 at 15:54

Blaze Tama · Accepted Answer · 2014-10-31T16:14:38.777

4

Thanks to njzk2 it seems your problem is we forgot to set the visibility to VISIBLE again in the if statement.

You need to specify what geView will do if there is no image :

if(rowItem.getThumbnailImageId() != null)
        {
            // here getImage() is converting byte array to bitmap

            Bitmap b2 = getImage(rowItem.getThumbnailImageId());
            Drawable drawable2 = new BitmapDrawable(b2);
            holder.thumdnail.setBackground(drawable2);

            holder.thumdnail.setVisibility(View.VISIBLE);
        }
    else
    {
      //hide the image, or do anything you like when theres no image
      holder.thumdnail.setVisibility(View.GONE);
    }

The point is in the else code, so the listview know what to do when there is an image (your if statement) and if there's not (the else statement).

And try to make your holder class static :

private static class ViewHolder

edited Oct 31 '14 at 16:14

answered Oct 31 '14 at 15:57

Blaze Tama

10,828
13
69
129

I have tried doing `holder.thumdnail.setVisibility(View.GONE);` but it hides all the images after scrolling. – pro_newbie Oct 31 '14 at 16:05
I dont know if this will work, try to set your holder class as "static" : "private static class ViewHolder". I dont see any mistake in your code. – Blaze Tama Oct 31 '14 at 16:11
2

@pro_newbie: yes, of course, because in the other clause you don't set the visibility back. – njzk2 Oct 31 '14 at 16:15
@njzk2 Yes, that should be the problem – Blaze Tama Oct 31 '14 at 16:18
Thanks all for helping. – pro_newbie Oct 31 '14 at 16:30

score 1 · Answer 2 · answered Oct 31 '14 at 15:59

1

You should hide the ImageView if you don't have the thumbnailID:

if(rowItem.getThumbnailImageId() != null)
    {
        holder.thumdnail.setVisibility(View.VISIBLE);

        Bitmap b2 = getImage(rowItem.getThumbnailImageId());
        Drawable drawable2 = new BitmapDrawable(b2);
        holder.thumdnail.setBackground(drawable2);
    }
else
{
     holder.thumdnail.setVisibility(View.GONE);
}

answered Oct 31 '14 at 15:59

Luciano Rodríguez

2,239
3
19
32

I have already tried that. When I scroll down and back up, the listview only show titles and all the images have disappeared. – pro_newbie Oct 31 '14 at 16:05
try calling LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE); only once. Declare mInflater as a field of your adapter and initialize it on your constructor, i.e. on your public CustomListViewAdapter(Context context, int resourceId, List items) method. – Luciano Rodríguez Oct 31 '14 at 16:08
@pro_newbie: with that actual line `holder.thumdnail.setVisibility(View.VISIBLE);` ? – njzk2 Oct 31 '14 at 16:16
Nope, you are initializing the LayoutInflater every time the getView method is called. In all my adapters I only call this method once, in the contructor. I don't really know if this will solve your issue, but it surely is a better practice. – Luciano Rodríguez Oct 31 '14 at 16:19

Custom ArrayAdapter shows duplicate images after scrolling

2 Answers2