ANDROID : Load asynchronous pictures in listView

Question

I \'d like to display a ListView with a customized adapter (with picture and text).

Images are loaded from distant servers, so I have decided to use AsyncTask.

Answer 1

This happened to me too. What I figured out was that before the new image was getting bound to the imageview, the old one was displayed for a while. In your case, what is happening is that your correct info is showing onPostExecute(), which takes sometime, and before that whatever data was set in the convertview is being shown. There are 2 ways u could mostly fix this,

In your getView(), change the if{}... else{} block to just

layoutItem = (LinearLayout) mInflater.inflate(R.layout.auto_gi, parent, false);

or

set the imageview with some placeholder image in getView() till onPostExecute() is called.

Hope this helps.

Answer 2

When you extend BaseAdapter and implement getView(int position, View convertView, ViewGroup parent) the convertView is actually a recycled view.

It is the view that was destroyed (last view to be pushed off the screen). What you can do is clear the convertView so it wont show the stale data. perhaps find the view with the image and do a layoutItem.removeAll() . Hopefully that will clear the views and give you a clean layout to work with.

Answer 3

Like Shubhayu mentioned, you're seeing wrong images in your ListView rows because your adapter is recycling a view to construct each row, and your Async Tasks are maintaining references to that recycled view. When your tasks complete, they'll update the ImageView, which may actually correspond to some other row by this point.

The problem with inflating a new view in every call to getView is you'll end up with bad performance for your ListView when scrolling. You are (correctly) using convertView to reduce this overhead, you're just missing the piece of correctly tying the ImageView to the Async. I found a solution here: http://android-developers.blogspot.com/2010/07/multithreading-for-performance.html

In summary, it's basically extending a Drawable to encapsulate a task, and only updating the image if the task is appropriately tied to the image. The section "Handling Concurrency" tackles the very issue you're facing. In particular, read the paragraph right before that section for a summary of what's causing your problem.