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.
