Around the Hill

Photos, and maybe a geeky blog post or two!

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 responses to “Working with the Android ListView”

  2. 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

    Reply

    • 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

      Reply

  3. 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

    Reply

  4. @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

    Reply

  12. @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

    Reply

  14. 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

    Reply

Leave a Reply

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

Gravatar
WordPress.com Logo

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

Facebook photo

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

Cancel

Connecting to %s

About

Privacy Policy

Terms & Conditions

Subscribe

Contact

Work with me

Services

Blog at WordPress.com.

%d bloggers like this: