Working with the Android ListView

Lately I have been working on adding some great new features to wpToGo, including improving the UI for the comment moderation area. I discovered that the Gravatar API was extremely easy to implement and thought it’d be great to have in my wpToGo’s comment moderation ListView.

Turns out that working with Android Layouts can be fairly tricky these days as there’s now multiple devices in the market that have varying screen sizes. Let’s make a ListView layout that will stretch its elements to fit on any Android device and still look snazzy.

First, let’s take a look at the ListView layout code, nothing too surprising here:

list_view.xml

<ListView android:id="@android:id/list"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:layout_weight="1.0"
        android:textColor="#444444"
        android:divider="@drawable/list_divider"
        android:dividerHeight="1px"
        android:cacheColorHint="#00000000">
</ListView>

The only thing to note there is that I created my own divider gradient named “list_divider” which is an xml file that you throw in your drawable folder. This really isn’t that hard, you just specify the colors for the left, center and right side:

list_divider.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:startColor="#999999"
                android:centerColor="#555555"
                android:endColor="#999999"
                android:height="1px"
                android:angle="0" />
        </shape>
    </item>
</layer-list>

So now we have our ListView ready to go, next is the layout for each row in the list. This is also done through a layout xml file that you specify later in your code. I wanted each row to have the Gravatar on the left, with all of the other content on the right so that it mirrored how comments appear on most WordPress blogs. Here’s the layout to get that to work:

row.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="horizontal"
	android:padding="4px">
	<ImageView android:id="@+id/avatar"
		android:layout_width="48px"
		android:layout_height="48px"/>
	<LinearLayout
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:orientation="vertical"
		android:paddingLeft="4px">
		<LinearLayout
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:orientation="vertical"
			android:layout_weight="1"
			android:gravity="center_vertical">
			<TextView android:id="@+id/name"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_weight="1"
				android:gravity="left"
				android:textStyle="bold"
				android:singleLine="true"
				android:ellipsize="end"
				android:textColor="#444444"
				android:padding="0px"/>
			<TextView android:id="@+id/email_url"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_weight="1"
				android:gravity="left"
				android:singleLine="true"
				android:ellipsize="end"
				android:padding="0px"
				android:textSize="10px"/>
			<TextView android:id="@+id/postTitle"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_weight="1"
				android:gravity="left"
				android:singleLine="true"
				android:ellipsize="end"
				android:padding="0px"
				android:textSize="10px"/>
			<TextView android:id="@+id/comment"
				android:orientation="vertical"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:singleLine="false"
				android:textColor="#666666"
				android:maxLines="5"
				android:ellipsize="end"/>
		<TextView android:id="@+id/status"
				android:orientation="vertical"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:singleLine="true"/>
		</LinearLayout>
	</LinearLayout>
</LinearLayout>

With all of that implemented and doing some background work to load the content, you’ll have a nice looking ListView row comment layout:

And there you have it, a nice looking comment ListView in Android.

24 comments

  1. Johnson · December 18, 2009

    good article

    Like

  2. Varun · December 18, 2009

    How do you make these list items clickable ?

    I’ve tried setting a onItemClickListener on the listview but it is never called when i’m clicking on the row in the emulator.

    Any ideas on this?

    Like

    • Dan · December 18, 2009

      It should work with something like this:

      listView.setOnItemClickListener(new OnItemClickListener() {
      						   
      	public void onNothingSelected(AdapterView arg0) {
      	
              }
      
      	public void onItemClick(AdapterView arg0, View arg1, int arg2, long arg3) {
      		//do your work here
      								
      	}
      
      });
      

      Like

  3. ganesh · December 18, 2009

    Thanks for the useful post especially for beginners like me.I could like to have a background image on listview with Back and Home buttons on the top left and right corners respectively on the screen.what i did is

    but i couldn’t make my Home button to place on the right top of the screen .i could appreciate your valuable suggest .moreover i could like to change the default color of the selected list item.

    Like

  4. Sudhaker · December 18, 2009

    @Ganesh,

    You can try implementing your app in RealtiveLayout,

    that way you can place the buttons on topleft and topright corners in a single row….

    then let the list occupy the rest of the screen….

    – Sudhaker

    Like

  5. Megha · December 18, 2009

    Hie,
    Can you show the java code of how to bind the row to the list adapter

    Like

  6. Matt Langston · December 18, 2009

    Thanks a lot for this! I had no idea you could make a gradient with XML.

    Like

  7. Noelle · December 18, 2009

    What’s place is place in the class file?

    Like

  8. Noelle · December 18, 2009

    How would the listview work with the data from database?
    I’m really stuck!

    Like

  9. Joui · December 18, 2009

    How do you tell the listview to load the row.xml file?

    Like

  10. Ashwath · December 18, 2009

    How can you load the row.xml file into listview??

    Like

  11. drhill · December 18, 2009

    hi – does this work with the htc touch? i was able to do an update with stock settings – but it won’t let me upload photos….

    Like

  12. Neelima · December 18, 2009

    @varun
    public class StaticDemo extends ListActivity {
    TextView selection;
    String[] items={“lorem”, “ipsum”, “dolor”, “sit”, “amet”,
    “consectetuer”, “adipiscing”, “elit”, “morbi”, “vel”,
    “ligula”, “vitae”, “arcu”, “aliquet”, “mollis”,
    “etiam”, “vel”, “erat”, “placerat”, “ante”,
    “porttitor”, “sodales”, “pellentesque”, “augue”,
    “purus”};
    @Override
    public void onCreate(Bundle icicle) {
    super.onCreate(icicle);
    setContentView(R.layout.main);
    setListAdapter(new ArrayAdapter(this,
    R.layout.row, R.id.label,
    items));
    selection=(TextView)findViewById(R.id.selection);
    }
    public void onListItemClick(ListView parent, View v,
    int position, long id) {
    selection.setText(items[position]);
    }
    }

    Like

    • Hagras · December 18, 2009

      this code does not work with me … please could you help?

      Like

  13. Pingback: 2010 Blog in Review | Around the Hill
  14. Antonis · December 18, 2009

    Hello wonderful guide/article!

    It would be great though if you could also show us the “background work” to make it fully function. I am very new to android and would like to know how to connect row.xml to the listview and also what to enter in the .java file

    Like

  15. Leandro · December 18, 2009

    Hi,
    I don’t know how to make the list view to understand that row.xml is responsible for the item layout.
    Can you help me?

    Like

  16. Jose Vigil · December 18, 2009

    <ListView android:id="@android:id/list"

    I had to use

    android:id="@+id/list

    Thanks

    Like

  17. Rajesh Mishra · December 18, 2009

    This is nice post!! its help me lot and the following link also helped me to complete my task.

    http://mindstick.com/Articles/802aac4e-b9ef-499e-a20b-f0d0fd56ae11/?Using%20ListView%20in%20Android%20Application

    Thanks!!

    Like

  18. Pingback: Android listview | Mysteryartworl
  19. or · December 18, 2009

    i didnt understand how to connect the row.xml with list_divider.xml with this article

    http://android.amberfog.com/?p=296

    can you help me please? do you have video of it?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s