Fancy ListViews, Part One

The classic Android ListView is a plain list of text — solid but uninspiring. This is the first in a series of posts where we will see how to create a ListView with a bit more pizazz. Today, in particular, we will see two techniques for creating a ListView whose rows contain icons, in addition to text.
If you want rows to have a different look than the stock rows, one way to accomplish this is to supply your own layout XML to be used for each row, telling Android to use your layout rather than one of the built-in ones. This gives you complete control over what goes in the row and how it is laid out.

For example, suppose you want a ListView whose entries are made up of an icon, followed by some text. You could construct a layout for the row that looks like this:

[sourcecode language=’xml’]
[/sourcecode]

This layout uses a LinearLayout to set up a row, with the icon on the left and the text (in a nice big font) on the right.

By default, though, Android has no idea that you want to use this layout with your ListView. To make the connection, you need to supply your Adapter with the resource ID of your custom layout:

This example, derived from one of the ones in my book, displays a list of random words, and puts the currently-selected word in a TextView.

The key in this example is that you have told ArrayAdapter that you want to use your custom layout (R.layout.row) and that the TextView where the word should go is known as R.id.label within that custom layout.

The result is a ListView with icons down the left side. In particular, all the icons are the same.

This technique — supplying an alternate layout to use for rows — handles simple cases very nicely. However, it falls down when you have more complicated scenarios for your rows, such as:

Not every row uses the same layout (e.g., some have one line of text, others have two)

You need to configure the widgets in the rows (e.g., different icons for different cases)

In those cases, the better option is to create your own subclass of your desired Adapter, override getView(), and construct your rows yourself. The getView() method is responsible for returning a View, representing the row for the supplied position in the adapter data.

For example, let’s rework the above code to use getView(), so we can have different icons for different rows — in this case, one icon for short words and one for long words:

In our getView() implementation, we first get our hands on a ViewInflate object, as described in the previous Building ‘Droids post, so we can use it to “inflate” our row layout XML and give us a View representing that row.

Then, we tailor that View to match our needs:

We fill in the text label into our label widget, using the word at the supplied position

We see if the word is longer than four characters and, if so, we find our ImageView icon widget and replace the stock resource with a different one

Now, we have a ListView with different icons based upon context of that specific entry in the list. Obviously, this was a fairly contrived example, but you can see where this technique could be used to customize rows based on any sort of criteria, such as other columns in a returned Cursor.

Next time, we’ll take a closer look at the convertView parameter to our getView() method and see how we can make use of it to more efficiently render our list.

Now in our tenth year, AndroidGuys offers daily news, reviews, editorials, and tutorials. Articles listed under this byline are comprised of those written by current and former employees of AndroidGuys as well as guest contributors and sponsors.

You really should use not introduce a tutorial without talking about convertView. I know your article will deal with this in the next installment, but developers might not find it. ListView examples should be carefully crafted to only give the best example 🙂

You can improve performance further by using the “ViewHolder pattern.” Simply do the following to avoid the calls to findViewById. A future SDK will contain examples of how to efficiently implement a ListView Adapter, and it presents how to use the ViewHolder pattern along with the convertView.

I didn’t include convertView because it gets complicated, and I’m not a huge fan of premature optimization. This particular set of blog posts is aimed at non-experts in Android, and I’m a big believer in walking before running.

With respect to ViewHolder, thanks for reminding me! I keep forgetting you put the tag hook into View for situations like this. I’ll probably work that into a future entry in this series.

Thanks for your input! Always good to hear from a real live Googler! 😉

Josh Elser

I’m a little confused, and I’m not sure if I’m just missing something, but in this example, as well with the latter parts of this series,

In your 2nd code block, in the StaticDemo class on this page, line 17, you use R.id.selection. But you don’t have this in the first xml code block. Looking at part 4 of the Fancy ListVIew, you also have the same line.

The XML in the first code listing is for a row (res/layout/row.xml), not the overall activity’s layout (res/layout/main.xml). The overall activity’s layout is not shown, but consists of a ListView and TextView, the latter being named selection.

In StaticDemo, then, you see the row layout XML referenced in the ArrayAdapter constructor as R.layout.row.

I apologize for the confusion — some of these posts skip files that aren’t essential to the points I’m trying to get across.

Barring unforeseen problems, you’ll be able to download the full source code to all these projects sometime this weekend from http://commonsware.com/Android/ — they’ll be packaged with version 1.1 of my book, along with a new chapter that expands upon the Fancy ListViews series of posts. But, you don’t have to buy the book to get the source code, as that’s a free download off the Web site at the aforementioned page.

If you have additional questions, let me know!

kuldipsinnh

hai friend is it possible to use
setContentView(R.layout.main); when we extend ListActivity
this code when i run giveerror to me.
pls help

Vincent Bodinier

I am using the Android SDK 1.1 r1 and this code doesn’t work at all (an error appears).
However, note that if I replace “setListAdapter(new ArrayAdapter(this,R.layout.row, R.id.label,items));”
by
“setListAdapter(new ArrayAdapter (this,android.R.layout.simple_list_item_1,items));”,
it works correctly but obviously I get the Android defined format of the row for the ListView (not what I want).
So, it seems that the setListAdapter method doesn’t accept your own Layout. Quite annoying !
Could you tell me if I am right or if it exits a solution to define your own layout for the adapter to use ?
Thanks.

This is the first in a series of blog posts on the topic. I encourage you to read them all. Moreover, these are nearly a year old — I only refer back to them because there is nothing else out there that is better that I have found. If you feel you can write better material on this subject, please do so.

With respect to TextView.setCompoundDrawablesWithIntrinsicBounds(), I disagree:

1. That technique is not general (i.e., there are many row layouts that cannot be achieved using that technique)

2. That technique does not support padding, as this example uses, without modifying the image

3. That technique has not been demonstrated to be faster or more efficient ( and I am assuming you lack such proof, otherwise you might have linked to it)

You are welcome to use TextView.setCompoundDrawablesWithIntrinsicBounds() in whatever cases you feel are appropriate. I have used it myself, though usually from layout XML. For the purposes of this specific example in this specific blog post, I do not feel its use is a good idea.

Thank you for this nice tutorial, I’m trying to apply your code now, with some changes.

Right after the setListAdapter(new IconicAdapter(this)); in your onCreate method, I’ve added: getListView().setTextFilterEnabled(true);

While the original example (which does not use the IconicAdapter, but instead a simple String[]) did work, the IconicAdapter does not work together with the text filter (I get that it always displays the first item only, no matter what I’m typing).

I guess I should override some methods somewhere, but I’m a bit stuck here, could you give me a hint?

yeah! I’ve got it working now.
I changed the class into
“public class IconicAdapter extends BaseAdapter implements Filterable”
and used the same implementation for the getView() method.

Furthermore I extended the Filter class and made the my IconicAdapter class return this filter in the overridden getFilter method.

Thanks for your help,
John.

Abhinav

Hi john,
Can you please guide me how you did the extending filter class part … m not sure what will go in performFiltering and publishResults functions .. also is there any other function to be overridden …

Please check the source code because your &#060; are interpreted as html start tags, so parts of the source code is missing.

Eugene

I consider myself a seasoned programmer. I have been programming in Java and PHP for 13 years. I’m recently starting to do stuff in the mobile platform arena. I’m still quite new to Android, and the challenge of changing the text color of ListView objects is proving quite painful. I tried what you said above, and the app crashes without anything in the logcat. I have 2 requests: 1) can you please fix your site to properly handle the [sourcecode] tags and 2) puh-lease provide an updated example that works with android 2.2? All I want to do is change the text color of my ListView so I can see it against my background, and I literally have been looking for a workable solution for weeks–it’s pissing me off.

Thanks
Eugene

Keith

The formatting is broke. Source-code is not appearing properly. Browsing with Ubuntu 10.04/Firefox 3.6.10…

Now in our 11th year, AndroidGuys loves to provide readers with the latest news and rumors as well as reviews, opinion pieces, and tools to get more from your Android. You have an awesome phone in your pocket; let us help you get more from it.