Lazy-load images into a ListView

by Evan Charlton » Sun, 12 Jul 2009 12:42:44 GMT


Sponsored Links
 Hey all,

I will be surprised if this hasn't been asked before, but I've been
Googling for days now and haven't found anything very helpful. My
problem is this:

I'm trying to lazy-load images into a ListView--almost exactly how
Market does it, if you're familiar with that. It's not exactly like
Market because the images there comes in batches whereas mine are one
at a time, but I digress...

I have the following adapter:  http://paste2.org/p/318634 
This adapter lazy-loads pages and each row's corresponding image (if
applicable) and caches it to disk for faster loading next time. This
all works perfectly *except* when loading images over the network,
they come in on the wrong rows and are sometimes duplicated. I assume
that this has to do with the adapter reusing views, but I haven't been
able to stamp it out.

Thanks for any help or pointers you can provide.

Cheers,
Evan Charlton
--~--~---------~--~----~------------~-------~--~----~



Lazy-load images into a ListView

by Mark Murphy » Sun, 12 Jul 2009 18:29:35 GMT


 


I suspect you are on the money with your assessment of the problem.

You pass in an ImageView to the AsyncTask and tell the task to replace
the image in that ImageView. However:

-- Since it is asynchronous, for a bit, the ImageView will remain
unchanged, which in the case of a recycled row will be whatever it was
before

-- If you scroll enough before the image is done loading, and the row is
recycled first, you'll get weird results (image will keep flipping to
different pictures as its various tasks complete)

I just went through implementing something very similar. I'll eventually
tease it out into something reusable and open source. Compared to the
snippet of your implementation, here are two things I did differently:

1. Rather than tie the AsyncTask to a specific ImageView, I have the
AsyncTask notify the ListView when an image load is complete, providing
it the URL of the loaded image. The ListView, when it inflates/recycles
rows, attaches the URL of the image that is supposed to be shown to each
ImageView via the setTag() method. Then, when the AsyncTask says
such-and-so URL is ready, the ListView walks the ImageViews and sees if
any are showing that image, by comparing the passed-in URL to each
ImageView's getTag(). If there's a match, ListView then loads the image
out of the AsyncTask-managed cache into the ImageView. This way, I don't
keep a strict tie between the AsyncTasks and the ImageViews. I suspect
there's a better-performing solution than my current implementation, but
it's at least tolerable for the moment.

2. Rather than try to hack around the existing AsyncTask's limitations,
I copied its source code (thank you, Android and Apache 2!) and made it
use an unbounded LinkedBlockingQueue and use more than one thread to
process it. That beats the heck out of trying to keep your own queue to
feed into the AsyncTask class's static queue.

-- 
Mark Murphy (a Commons Guy)
 http://commonsware.com  |  http://twitter.com/commonsguy 

Android 1.5 Programming Books:  http://commonsware.com/books.html 

--~--~---------~--~----~------------~-------~--~----~


Sponsored Links


Lazy-load images into a ListView

by Evan Charlton » Sun, 12 Jul 2009 21:48:03 GMT


 ark,

Thanks for the reply!


Even if I never scroll, the results are still jumbled and/or duplicated.


I'll code this up later and see if I have any problems.


Haha, yeah, that code could be cleaner, but it works pretty reliably,
so I'm going to avoid replacing it until it becomes the problem.

Evan Charlton



On Sun, Jul 12, 2009 at 6:29 AM, Mark Murphy<mmur...@commonsware.com> wrote:

--~--~---------~--~----~------------~-------~--~----~



Lazy-load images into a ListView

by Christine » Sun, 12 Jul 2009 23:55:09 GMT


 hat if you have the listview load the images from a hashmap, and have
a separate process fill the hashmap in the background?



On Jul 12, 3:47pm, Evan Charlton <evancharl...@gmail.com> wrote:
--~--~---------~--~----~------------~-------~--~----~



Lazy-load images into a ListView

by Mark Murphy » Sun, 12 Jul 2009 23:57:55 GMT


 


That's effectively what I'm doing, but you still need to tell the
ListView when images are ready to be loaded out of the HashMap. That's
for the case where the ListView is trying to display one of the images
but does not have it yet, substituting some placeholder instead until
the image is downloaded.

-- 
Mark Murphy (a Commons Guy)
 http://commonsware.com  |  http://twitter.com/commonsguy 

Need Android talent? Ask on HADO!  http://wiki.andmob.org/hado 

--~--~---------~--~----~------------~-------~--~----~



Lazy-load images into a ListView

by Christine » Mon, 13 Jul 2009 04:51:11 GMT


 My app loads new data like every four minutes, and if the pic is not
there in time, too bad, you'll have it in the next round. What you can
do is if the hashmap returns null, subsitute a default pic, which I
gues you have to do because you'll probably have a recycled view which
already contains a pic - but the wrong one.

It gets really weird when you have different views for the items in
the listview, like when the user changes the layout, or you have
different layouts in portrait mode and landscape, or all of the above.
I chose to trade in options for better recycling of views.

Another issue is, do you want to spend a lot of time at startup
preparing for the listview so the scrolling is smooth, but the user
has to wait a little longer, or do you want to display views quickly,
at the cost of bumpy scrolling? At any rate, the simpler the UI, the
better.





--~--~---------~--~----~------------~-------~--~----~



Other Threads

1. Create graphic interfaces dinamically

Hi every one, I trying to create an application similar to the
notepad3 tutorial. The main difference is that I need to be able to
create different "note formats". Is possible to obtain an xml file
from the web and use it in the creation of an android interface? I
have researched about the Metawidget library that is a very useful
tool for android but I haven't been able to create interfaces
dynamically. Thanks in advance.

Regards,
Helios

--~--~---------~--~----~------------~-------~--~----~

2. remote service process persists (i.e. won't disappear from process table)

Google employees... any ideas about this? Thanks.

--~--~---------~--~----~------------~-------~--~----~

3. OPEN Gl application

4. Linking Google Checkout to Adwords save fees??

5. Synchronous OpenMAX IL component

6. a/v sync in mediarecorder

7. the market for profit is open!!