Question

When creating a listview layout, is it advisable to keep the layouts as simple as possible with relative layouts and minimal images and text, or is it ok to make them a little fancier with a couple of buttons, possibly an image or two, and some text within tablelayouts?

I am trying to minimise the clicks/touches to get to the pertinent information, and giving the user a nicer UI to play with as opposed to a bog standard list.

I’ve tried to research it but cant find guidlines on design layout and limitations on listviews.

Something tells me the xml below is the cause of the choking the listview experiences if the resultset grows to more than say 20?

Thank you.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="@color/White" android:gravity="center">
<TableLayout android:layout_height="wrap_content" android:id="@+id/tableLayout1" android:layout_width="fill_parent">
    <TableRow android:id="@+id/tableRow1" android:layout_height="wrap_content" android:layout_width="fill_parent">
        <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/linearLayout2">
            <ImageView android:layout_marginRight="10px" android:layout_width="60dip" android:layout_marginTop="4px" android:id="@+id/icon" android:layout_height="60dip" android:src="@drawable/indian" android:layout_marginLeft="4px"></ImageView>
            <TableLayout android:layout_height="match_parent" android:id="@+id/tableLayout2" android:layout_width="fill_parent">
                <TableRow android:id="@+id/tableRow5" android:layout_height="wrap_content" android:layout_width="fill_parent">
                    <TextView android:focusableInTouchMode="false" android:paddingTop="5dip" android:textColor="@color/Black" android:id="@+id/title" android:textSize="18dip" android:layout_height="wrap_content" android:maxLines="10" android:layout_gravity="left" android:focusable="false" android:layout_width="fill_parent" android:text="@+id/label"></TextView>
                </TableRow>
                <TableRow android:id="@+id/tableRow6" android:layout_width="wrap_content" android:layout_height="wrap_content">
                    <TextView android:textColor="@color/Black" android:layout_height="wrap_content" android:id="@+id/distanceText" android:textSize="12dip" android:layout_width="wrap_content" android:gravity="center" android:layout_gravity="left" android:text="TextView"></TextView>
                </TableRow>
            </TableLayout>
        </LinearLayout>
    </TableRow>
    <TableRow android:id="@+id/tableRow2" android:layout_height="wrap_content" android:layout_width="wrap_content" android:paddingBottom="15dip">
        <LinearLayout android:id="@+id/linearLayout3" android:layout_width="wrap_content" android:layout_height="wrap_content">
            <TableLayout android:layout_height="match_parent" android:id="@+id/tableLayout3" android:layout_width="fill_parent">
                <TableRow android:layout_height="match_parent" android:id="@+id/tableRow8" android:layout_width="fill_parent">
                    <ImageView android:id="@+id/introImage" android:layout_height="wrap_content" android:layout_width="fill_parent" android:scaleType="fitStart" android:paddingLeft="8dip"></ImageView>
                </TableRow>
                <TableRow android:id="@+id/tableRow4" android:layout_width="wrap_content" android:layout_height="wrap_content">
                    <TextView android:linksClickable="true" android:textColor="@color/Black" android:layout_height="wrap_content" android:focusable="false" android:text="more" android:autoLink="all" android:textColorLink="@color/Aqua" android:textSize="12dip" android:clickable="true" android:paddingRight="5dip" android:id="@+id/intro" android:paddingTop="5dip" android:focusableInTouchMode="false" android:paddingLeft="5dip" android:layout_width="wrap_content"></TextView>
                </TableRow>
                <TableRow android:id="@+id/tableRow7" android:layout_width="wrap_content" android:layout_height="wrap_content">
                    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/description" android:text="description" android:visibility="invisible" android:paddingLeft="5dip" android:paddingRight="5dip" android:textColor="@color/Black" android:textSize="12dip" android:autoLink="all" android:clickable="true" android:linksClickable="true" android:textColorLink="@color/DarkGray"></TextView>
                </TableRow>
            </TableLayout>
        </LinearLayout>
    </TableRow>
    <TableRow android:id="@+id/tableRow3" android:layout_height="wrap_content" android:layout_width="fill_parent" android:background="@drawable/listviewmenu" android:layout_gravity="center_horizontal" android:gravity="center_horizontal">
        <LinearLayout android:layout_height="wrap_content" android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_gravity="center" android:gravity="center">
            <Button android:id="@+id/mapClick" android:layout_height="wrap_content" android:text="@string/map_info" android:layout_width="wrap_content" android:background="@drawable/actionbutton" android:textColor="@color/White" android:textColorHighlight="@color/AntiqueWhite" android:textStyle="bold" android:gravity="center"></Button>
            <Button android:id="@+id/moreClick" android:layout_height="wrap_content" android:text="@string/more_info" android:layout_width="wrap_content" android:textColor="@color/White" android:textColorHighlight="@color/Aqua" android:textStyle="bold" android:gravity="center" android:background="@drawable/actionmore"></Button>
        </LinearLayout>
    </TableRow>
</TableLayout>

Answer 1

The following is the same layout but use only one RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="60dip"
        android:layout_height="60dip"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="4px"
        android:layout_marginRight="10px"
        android:layout_marginTop="4px"
        android:src="@android:drawable/dialog_frame" >
    </ImageView>

    <TextView
        android:id="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/icon"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:maxLines="10"
        android:paddingTop="5dip"
        android:text="@+id/label"
        android:textColor="@android:color/black"
        android:textSize="18dip" >
    </TextView>

    <TextView
        android:id="@+id/distanceText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:layout_gravity="left"
        android:layout_toRightOf="@+id/icon"
        android:gravity="center"
        android:text="TextView"
        android:textColor="@android:color/black"
        android:textSize="12dip" >
    </TextView>

    <ImageView
        android:id="@+id/introImage"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/icon"
        android:paddingLeft="8dip"
        android:scaleType="fitStart" >
    </ImageView>

    <TextView
        android:id="@+id/intro"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/introImage"
        android:autoLink="all"
        android:clickable="true"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:linksClickable="true"
        android:paddingLeft="5dip"
        android:paddingRight="5dip"
        android:paddingTop="5dip"
        android:text="more"
        android:textColor="@android:color/black"
        android:textColorLink="@android:color/primary_text_light"
        android:textSize="12dip" >
    </TextView>

    <TextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/intro"
        android:autoLink="all"
        android:clickable="true"
        android:linksClickable="true"
        android:paddingLeft="5dip"
        android:paddingRight="5dip"
        android:text="description"
        android:textColor="@android:color/black"
        android:textColorLink="@android:color/darker_gray"
        android:textSize="12dip"
        android:visibility="invisible" >
    </TextView>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:background="@android:drawable/dialog_frame" >

        <Button
            android:id="@+id/mapClick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/dialog_frame"
            android:text="map_info"
            android:textColor="@android:color/white"
            android:textColorHighlight="@android:color/secondary_text_light"
            android:textStyle="bold" >
        </Button>

        <Button
            android:id="@+id/moreClick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/dialog_frame"
            android:gravity="center"
            android:text="more_info"
            android:textColor="@android:color/white"
            android:textColorHighlight="@android:color/primary_text_light"
            android:textStyle="bold" >
        </Button>
    </LinearLayout>
</RelativeLayout>

I just changed color, string and drawable references to see if it works!

RelativeLayout rulez!