Custom list row in ListView graphical layout

Question

There are many many posts and an infinite number of questions on how to create a custom row and add it to a ListView. All the posts I find however, use Java code to set the custom row layout file to the list. Most samples do something like this:

ArrayAdapter<String> adapter = new ArrayAdapter<String>
    (this,R.layout.row_layout,R.id.text1,colors);

I was wondering if there isn't a way to do this in the XML files directly? Isn't there a property on the ListView where you can set a custom layout file for the rows?

The reason I'm asking is because I'm trying to do all (most) of my layout work in the Graphical Layout tool in Eclipse and I would like to be able to preview my layouts in it without launching the app.

Surely this should be possible in one way or another? If I could to it in the XML I would be very happy but if I have to write a custom class that will show up in the "custom" part of the graphical layout editor that will do as well.

Many thanks for your time.

Answer 1

It is possible to preview ListViews in the graphical editor. Just right-click the ListView and choose "Preview List Content". Then select "Custom" and choose the custom row layout.

Here's an example:

my_custom_list.xml

 <ListView android:id="@android:id/list"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:drawSelectorOnTop="false">
     <!-- Preview: listitem=@layout/account_list_item -->
 </ListView>

my_custom_row.xml

<CheckBox
    android:id="@+id/icon"

    android:layout_width="wrap_content"
    android:layout_height="fill_parent"

    android:layout_alignParentTop="true"
    android:layout_alignParentBottom="true"
    android:layout_marginRight="6dip"
     />

<TextView  
    android:id="@+id/secondLine"

    android:layout_width="fill_parent"
    android:layout_height="26dip" 

    android:layout_toRightOf="@id/icon"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"

    android:singleLine="true"
    android:ellipsize="marquee"
    android:text="[email protected]" />

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"

    android:layout_toRightOf="@id/icon"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_above="@id/secondLine"
    android:layout_alignWithParentIfMissing="true"

    android:gravity="center_vertical"
    android:text="Account name" />

In the graphical editor of my_custom_list.xml, right click the list. Choose the my_custom_row from the "Custom" option in the "Preview List Content".