Android ListView with separate headers and images loading from remote server

ListView is one of the commonly used widget in Android. You might have used normal ListView which is just the list of things (text/images). Sometimes you might want to use ListView which has sections or headers. There were no straight forward(easy ways) to do this in Android.

Jeff Sharkeys shown us way for creating such ListView. It was limited to load images from local. Many of us including me was looking out for something which loads images from remote server.
Android ListView with separate headers
Putting it all together I have used SeperatedListAdapter and CursorAdapter for showing the ListView. See the example at the right side(image not very clear).

First lets create XML which we will use for ListView.

1. demoheader.xml – XML file which holds layout for header in list.
2. demorow.xml – XML file which holds layout for row in the list view under each header.

Now we have 2 adapters which are from Jeff Sharkeys’ example used for Separating list.

1. SeperatedListAdapter – Accepts the other adapters and divides them into sections.
2. ObservableAdapter – Helps SeperatedListAdapter for updating section list changes.

Now we are ready to draw list. In onCreate function create object of SeperatedListAdapter passing it on context and header layout. After that we should have sections. For example we can have two sections variables as follows:

Each of the above List item value will have list of map variable which has string and url to be loaded from remote location. It can be found in MainActivity file that shows how I had added sections.

In the same file you will find that I have ExAdapter which extends CursorAdapter and loads images from remote server. For loading images I have used ImageThreadLoader class which loads image from remote server which has 2 levels of caching(Disk and Soft reference), which helps improve performance of ListView.

That’s it. You can checkout complete demo project at Google Code. Any suggestions / issues, let me know in the comments.

5 Comment

  1. Ashish Pathak says: Reply

    Thanks for wonderful tutorial dude…

  2. Julius says: Reply

    Wow. There are lots of wanna-be tutorials describing sectioned listViews.

    This is the most complete, and yet clear enough to understand, code for this problem that I’ve seen.

    Of course, everyone will need to tweak to adapt it to our needs, but that is expected. It really is that good.

  3. very useful tutorial! thx bro…

  4. ikbal says: Reply

    Thank you very much for your tutorial and code. But there is something I need to change inside this adapter. I need to set the item view not a single but multiple view types? for that I think I need to override getItemType() but I couldn’t do it. Can you give me a hand, thanks

  5. Sourav says: Reply

    TUTORIAL is not found on the links. Would you please send me the same to my email Id?

Leave a Reply to Ashish Pathak Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.