ImageView overlap when adding more items in existi

Question

I am creating a ListView which as a TextView and ImageView as a list item row.

initially i am loading default items from local database in a listview view and I have a update button on the top of listview to load more items from server

when a user press an update button i am firing a AsyncTask which pull the icon urls and text from the server.

to load an icon in a ImageView i am using sample of ImageDownloader but the issues is my ImageView is getting overlapped with the old ImageViews bcoz of ViewHolder pattern. so can someone poit me what am i doing wrong ?

and here is my ListView Adapter code

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

                ViewHolder holder;
                TemplateData data = (TemplateData) this.getItem( position );

                if(convertView == null){
                    LayoutInflater inflater=(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                    convertView=inflater.inflate(R.layout.text_template_default_row, parent, false);

                    holder = new ViewHolder();
                    holder.templateText = (TextView) convertView.findViewById(R.id.defText);
                    holder.templateIcon = (ImageView)convertView.findViewById(R.id.defIcon);
                    holder.templateTitle = (TextView) convertView.findViewById(R.id.defTitle);

                    convertView.setTag(holder);

                }else{

                    holder = (ViewHolder)convertView.getTag();

                }


                holder.templateText.setText(data.getText() );
                holder.templateTitle.setText(data.getTemplateTitle());

                //isImageLoading initially sets to false so that default items will use the 
               // resource ids , it gets falsed when AsyncTask finished load Images and update the 
               //adapter and at that time this adapter has to pic the image from ImageDowloader
                if(!isImageLoading)
                    data.setTemplateIconId(iconList[position]);


                //Has resource id but not icon url
                if(data.getTemplateIconId()!=0 && data.getTemplateIconUrl()==null ){

                    Log.d("Load icon ","Default Load");

                    holder.templateIcon.setBackgroundResource(data.getTemplateIconId());



                // does not has recource id so load url from server
                }else if(data.getTemplateIconUrl()!=null && data.getTemplateIconId()==0){


                    Log.d("Load icon ","From Server Load");

                    imageDownloader.download(data.getTemplateIconUrl(), (ImageView) holder.templateIcon);



                }




                    return convertView;

         }

iconList contains the resources ids of existing icons in an application. Please feel free to ask if someone wants more information.

EDIT

Here are the screen shots

Initially there will be 8 templates & its icon which are loading from database stored in a android phone only. its name start from template 1 to template 6

now when a user presses update button new templates will be loaded over here. its name starts from template new 1 to template new 9 but the imageViews gets overlapped when i scroll up n down

here is the screen shots

Answer 1

I suspect that your imageDownloader is calling setImageResource (or equivalent--it's setting the src attribute) of your ImageView, while you are initially calling setBackgroundResource. That would explain the overlap.

What you need to do is change setBackgroundResource to setImageResource in the following code:

 if(data.getTemplateIconId()!=0 && data.getTemplateIconUrl()==null ){

                Log.d("Load icon ","Default Load");

                // This line should say setImageResource:
                holder.templateIcon.setBackgroundResource(data.getTemplateIconId());
 } else ... 

The issue that @Akos mentions (which he appears to have deleted) will be an issue for you if a download takes a long time and the view has already been reused. To restate what he stated, once you get this working via the solution above, you will find that if an image download takes a long time (so long that the row has already been reused, and the new image set) that your images may be overwritten with older images.

Therefore, inside of imageDownloader you will also want to say, before downloading:

imageView.setTag(url);

and then after the download completes, before setting the image in the ImageView:

if(!(String)imageView.getTag().equals(url)
{ 
     return; 
}

This way, if the ImageView has been reused by another row in the meantime, the download will simply abort.