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 says:

    good article

    Like

  2. Varun says:

    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

    1. Dan says:

      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 says:

    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 says:

    @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 says:

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

    Like

    1. Dan says:

      All of this code ended up in WordPress for Android. Take a look at the moderateCommentsTab.java source to see how the data was bound:

      http://android.trac.wordpress.org/browser/trunk/src/org/wordpress/android/moderateCommentsTab.java

      Like

      1. Hagras says:

        Thanks a lot ….. but it has been removed ….. could you give me another link for it our send it to my ……. mohamed000eg@yahoo.com

        Like

  6. Matt Langston says:

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

    Like

  7. Noelle says:

    What’s place is place in the class file?

    Like

  8. Noelle says:

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

    Like

  9. Joui says:

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

    Like

  10. Ashwath says:

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

    Like

    1. Dan says:

      Check out this post which covers binding an adapter to the ListView:

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

      Like

  11. drhill says:

    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 says:

    @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

    1. Hagras says:

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

      Like

  13. Antonis says:

    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

  14. Leandro says:

    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

  15. Jose Vigil says:

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

    I had to use

    android:id="@+id/list

    Thanks

    Like

  16. Rajesh Mishra says:

    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

  17. or says:

    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 Comment

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s