ImageView overlaps when adding more items to an existing ListView

Question

I am creating a ListView that is both a TextView and an ImageView as a list box.

I first load the default items from the local database in the listview view and I have an update button at the top of the list to load more items from the server

when the user clicks the update button , I run a AsyncTask that pull out the urls and .

I use the ImageDownloader sample to load the icon in ImageView, but the problem is that my ImageView overlaps with the old ImageViews bcoz of the ViewHolder template. so can someone fuck 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 resource identifiers of existing icons in the application. Please feel free to ask if anyone wants more information.

EDIT

Here are the screenshots

Initially, 8 templates and an icon will be created, loaded from a database stored only on the android phone. his name starts from pattern 1 to pattern 6

Now, when the user clicks the refresh button, new templates will be downloaded here. its name starts from template new 1 to template new 9, but the Views image overlaps when I look n down

here are the screenshots

Answer 1

I suspect that your imageDownloader calls setImageResource (or the equivalent - it sets the src attribute) of your ImageView , while you are initially calling setBackgroundResource . This explains the coincidence.

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 problem that @Akos mentions (which apparently was removed) will be a problem for you if the download takes a long time and the view has already been reused. To repeat what he stated, as soon as you get this work using the above solution, you will find that if it takes a long time to load an image (as long as the row has already been reused and a new set of images) that your images can be overwritten with old images.

Therefore, inside imageDownloader you also want to say before loading:

 imageView.setTag(url); 

and then after the download is complete before installing the image in ImageView :

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

That way, if ImageView reused by another line, the download will simply be canceled.