Adding ImageViews programmatically to LinearLayout in ListView creates more ImageViews than desired

Question

I'm going to try to explain my problem while still making sense.

My MainActivity basically displays a lot of posts, like a Twitter feed, in a ListView with a custom ArrayAdapter. This ListView consists of a bunch of TextViews and ImageViews, but also a LinearLayout. I've got the LinearLayout to display attached pictures IF there are any pictures attached to the message. Since I don't know how many pictures are attached I solved it with having this in my "private class StreamAdapter extends ArrayAdapter"Class:

// Are there pictures attached to the message?
if((dataList.get(position).getAttachments().size()) != 0)
{
    ArrayList<ImageView> attachedList = new ArrayList<ImageView>();
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    params.gravity = Gravity.LEFT;

    for(int i = 0; i < dataList.get(position).getAttachments().size(); i++)
    {

        String attachmentThumbnailURL= "http://img.photobucket.com/albums/v132/HellSong/cake_2.jpg";
        final String attachmentURL= "http://img.photobucket.com/albums/v132/HellSong/cake_2.jpg";

        attachedList.add(i, new ImageView(MainActivity.this));

        // Make clicking the thumbnail open the actual picture in the browser
        attachedList.get(i).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent();
                intent.setAction(Intent.ACTION_VIEW);
                intent.addCategory(Intent.CATEGORY_BROWSABLE);
                intent.setData(Uri.parse(attachmentURL));
                startActivity(intent);
            }
        });

        attachedList.get(i).setAdjustViewBounds(true);
        attachedList.get(i).setId(i);
        attachedList.get(i).setTag(attachmentThumbnailURL);
        attachedList.get(i).setPadding(0, 5, 5, 5);
        attachedList.get(i).setLayoutParams(params);

        new ImageDownloadTask().execute(attachedList.get(i));
        holder.attachments.addView(attachedList.get(i));    
    }
    holder.attachments.setVisibility(convertView.VISIBLE);
}

dataList is the ArrayList of messages that are displayed. It almost works perfectly, except for when I'm scrolling through the entire list of messages back and forth (which takes up a lot more than the cellphone screen), when I get to a message which has an attached picture, it loads the picture AGAIN as though it had two attached pictures. Which it doesn't. And then it keeps adding more, if I keep going the whole listview will probably be filled with my attached picture. Anyone know how to solve this..?

EDIT (question and thought): I'm guessing the reason my pictures get loaded several times is that the method is triggered each time the post is visible on the screen? Perhaps a solution could be to have an Int-array where whenever I load pictures in a post I look in the array for the post ID. If it's there, I don't load the pictures, if it's not there I load the pictures and add the posts ID to the int array so it doesn't load again?

EDIT 2: It doesn't seem to work, because now when I first load the picture and then scroll away.. when I scroll back to the post there's no picture at all. So it appears that it's either none or a whole bunch of them. Slightly annoying.

Answer 1

I would have made the arraylist global so that I can save it for configuration changes but your problem is due to the fact that you create a new arraylist every time the screen has to be updated. The holder keeps getting new copies of what it has and they are all appended to what it has already. You may want to flush the holder any time you want to refresh the images, you might want to try this

//Flush the holder in case it can be flushed, set contents to null
    ArrayList<ImageView> attachedList = new ArrayList<ImageView>();//global variable that I clear every time I want to reload data
        // Are there pictures attached to the message?
        if((dataList.get(position).getAttachments().size()) != 0)
        {
            attachedList.clear();
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            params.gravity = Gravity.LEFT;

            for(int i = 0; i < dataList.get(position).getAttachments().size(); i++)
            {

                String attachmentThumbnailURL= "http://img.photobucket.com/albums/v132/HellSong/cake_2.jpg";
                final String attachmentURL= "http://img.photobucket.com/albums/v132/HellSong/cake_2.jpg";

                attachedList.add(i, new ImageView(MainActivity.this));

                // Make clicking the thumbnail open the actual picture in the browser
                attachedList.get(i).setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Intent intent = new Intent();
                        intent.setAction(Intent.ACTION_VIEW);
                        intent.addCategory(Intent.CATEGORY_BROWSABLE);
                        intent.setData(Uri.parse(attachmentURL));
                        startActivity(intent);
                    }
                });

                attachedList.get(i).setAdjustViewBounds(true);
                attachedList.get(i).setId(i);
                attachedList.get(i).setTag(attachmentThumbnailURL);
                attachedList.get(i).setPadding(0, 5, 5, 5);
                attachedList.get(i).setLayoutParams(params);

                new ImageDownloadTask().execute(attachedList.get(i));
                holder.attachments.addView(attachedList.get(i));    
            }
            holder.attachments.setVisibility(convertView.VISIBLE);
        }

I know its very late but it might help someone else.