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. How to create a "Hello World" application?

Hi everybody.
I'm getting started in Android plataform.
I want to know how could I creat a "Hello World" application?
Thanks everybody.

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

2. Android SDK installation for Windows and other platforms and R.id cannot be resolved

Posted February 15, 2009 by Harry
Hi All,
For those of you that are having difficulty with the Android SDK
installation for Windows and other platforms,  I found this to be the
best link for the installation as it has step by step video
instructions.
Here are the updated links since this tutorial was made last year.
Best tutorial on the Web, in my opinion:
http://www.hometutorials.com/google-android.html
There have been new releases so in step one get the new SDK.

Step 1:  I used this Link for the SDK 1.1 instead.
Download the oftware Development KitSDK 1.1 released February 9th
2009 from here: http://developer.android.com/sdk/1.1_r1/index.html
Mac and Linux are available there too. (Google rocks!)

Step 2: I used this Link for the Java SE JDK instead as it is now  the
Java SE Development Kit 6u12
Download the Java SE JDK ava Development kitfrom here:
https://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-Site/en_US/-/USD/viewproductdetail-start?productref=jdk-6u12-oth-...@cds-cds_developer
Linux, Solaris and Windows platforms are available there too. (Java
rocks!)

Step 3: I used this Link for the Eclipse IDE for Java Developers (85
MB), it the java-ganymede-SR1-win32.zip as the tutorial instructs
you to use.
Download the Eclipse IDE for Java Developers (85 MB)from here:
http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/ganymede/SR1/eclipse-java-ganymede-SR1-win32.zip
Windows, Mac OS X and Linux platforms are available there too.
(Eclipse rocks!)

If the links do not post correctly, just copy them into your browser
Now, you can use the tutorial and write ello World with the latest
updates and it will work just fine ;-)
So will the Tutorials and Sample Code until you get to ime Pickeras .id cannot be resolved I am working on that problem today.
Please reply to this Forum (Android Beginners rocks!) and please cc me
if you have a fix.

Best,
Harry


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

3. "No applications can perform this action." error

4. Send Email (Not from User's Account)

5. Sending Emails

6. Error when clicking on 'Setup Merchant Account'

7. "No applications can perform this action."