ListView Values are being duplictaed upon scrolling

Question

I am using a listview s.t every row have an imageview and a flowlayout, I extended the baseadapter and I send it an arraylisy of hashmaps each one have the image path and a list of words my problem is every time I scroll up an entry "leaves" the screen and then down and the entry "comes back" to the screen the words in the entry flowlayout that gets recycled are being duplicated (meaning if the word next to a disk-on-key is "dok" then after I scroll down and then up again the word in the flowlayout is now "dok dok")...I cant figure out why... =(

I took the flowlayout + bubbles to it from here - http://www.superliminal.com/sources/FlowLayout.java.html http://nishantvnair.wordpress.com/2010/09/28/android-create-bubble-like-facebook/

and a decode async task to load images into the list from @MCeley's answer here - Large ListView containing images in Android

and that is my getView code -

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView = null;
    FlowLayout flowLayout = null;
    if (convertView == null) {
        convertView = layoutInflater.inflate(R.layout.list_item, null);
        imageView = (ImageView) convertView.findViewById(R.id.list_image);
        flowLayout = (FlowLayout) convertView.findViewById(R.id.flow_tags);
    } else {
        imageView = (ImageView) convertView.findViewById(R.id.list_image);
        flowLayout = (FlowLayout) convertView.findViewById(R.id.flow_tags);
        DecodeTask task = (DecodeTask) imageView.getTag(R.id.list_image);
        if (task != null) {
            task.cancel(true);
        }
    }
    HashMap<String, List<String>> photos = new HashMap<String, List<String>>();
    photos = data.get(position);
    imageView.setImageBitmap(null);
    DecodeTask task = new DecodeTask(imageView);
    task.execute(photos.get(DatabaseHandler.KEY_PATH).get(0));
    imageView.setTag(R.id.list_image, task);

    ArrayList<String> subjects = new ArrayList<String>();
    int size = photos.get(DatabaseHandler.KEY_TAGS).size();
    for (int i = 0; i < size; i++) {
        String name = String.format("name - %s ",
                photos.get(DatabaseHandler.KEY_TAGS).get(i));
        Bubble.getBubble(name, flowLayout, subjects, activity,
                photos.get(DatabaseHandler.KEY_PATH).get(0), false, false);
    }

    return convertView;
}

TNX in advance..!

Answer 1

Use this Code in your Adapter.It should be re-use the row if not null and delete the duplicated row.

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

    // A ViewHolder keeps references to children views to avoid unneccessary
    // calls
    // to findViewById() on each row.
    ViewHolder holder;
    // When convertView is not null, we can reuse it directly, there is no
    // need
    // to reinflate it. We only inflate a new View when the convertView
    // supplied
    // by ListView is null.

    if (convertView == null) {

        convertView = mInflater.inflate(R.layout.sample, null);
        // Creates a ViewHolder and store references to the two children
        // views
        // we want to bind data to.
        holder = new ViewHolder();
        holder.name = (TextView) convertView.findViewById(R.id.text);
        holder.icon = (ImageView) convertView.findViewById(R.id.icon);
        convertView.setTag(holder);
    } else {
        // Get the ViewHolder back to get fast access to the TextView
        // and the ImageView.

        holder = (ViewHolder) convertView.getTag();

    }

    // Bind the data efficiently with the holder.
    holder.name.setText(myElements.get(id));
    holder.icon.setImageBitmap(mIcon1);

    return convertView;
}

static class ViewHolder {
    TextView  name;
    ImageView icon;
}

Answer 2

try using holder for your views, i.e ImageView and flowLayout.

   ViewHolder holder;            
       // When convertView is not null, we can reuse it directly, there is no need            
       // to reinflate it. We only inflate a new View when the convertView supplied            
       // by ListView is null.            

       if (convertView == null) {                

        convertView = mInflater.inflate(R.layout.sample, null);   
        // Creates a ViewHolder and store references to the two children views                
        // we want to bind data to.               
        holder = new ViewHolder();                
        holder.imageview= (ImageView) convertView.findViewById(R.id.list_image);               
        holder.flowLayout= (FlowLayout) convertView.findViewById(R.id.flow_tags);                
        convertView.setTag(holder);            
       } else {                
        // Get the ViewHolder back to get fast access to the FlowLayout
        // and the ImageView.


        holder = (ViewHolder) convertView.getTag();

       } 

create class viewHolder

static class viewHolder(){

        ImageView imageview;
        FlowLayout flowlayout;

}