Working with the Android ListView

24

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 thoughts on “Working with the Android ListView

  1. Varun

    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?

    1. Dan Post author

      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
      								
      	}
      
      });
      
  2. ganesh

    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.

  3. Sudhaker

    @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

  4. Neelima

    @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]);
    }
    }

  5. Pingback: 2010 Blog in Review | Around the Hill

  6. Antonis

    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

  7. Pingback: Android listview | Mysteryartworl

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

Follow

Get every new post delivered to your Inbox.

Join 2,657 other followers

%d bloggers like this: