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.

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:

Java

1 2	List<map<string,?>> section_one = new LinkedList<map<string,?>>(); List<map<string,?>> section_two = new LinkedList<map<string,?>>();

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.

Source : http://umakantpatil.com/posts/android-listview-with-separate-headers-and-images-loading-from-remote-server/