Android custom row layout in ListView with flexible height

Question

Hi I'm trying to create a row like this:

The row should be with flexible height and grow taller is the subtitle text is long. The green view at the left should grow too to fill the entire height of the row. The row height should be determined based only on the text (Title + Subtitle).

This is the layout that I created:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

        <View
            android:id="@+id/is_in_range_view"
            android:layout_width="15dip"
            android:layout_height="fill_parent"
            android:background="#99CC00" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/row_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dip"
                android:layout_marginTop="5dip"
                android:text="@string/title"
                android:textSize="16sp" />

            <TextView
                android:id="@+id/row_subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dip"
                android:layout_marginLeft="10dip"
                android:text="@string/subtitle"
                android:textSize="12sp" />

            <View
                style="@style/SeparatorLine"
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:layout_marginTop="5dip" />
        </LinearLayout>
</LinearLayout>

But this is the result I get:

Clearly the fill_parent value of the View's layout_height property is problematic, but this is exactly what I want! I just want the row height will be based on the text, not the green view.

How can I do that?

Answer 1

Ok, The problem is that I put the wrong value for layout_height in the inner LinearLayout that holds the two TextView's. It was set to fill_parent instead of wrap_content.

Once set to wrap_content everythig went fine.

The right layout code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<View
    android:id="@+id/is_in_range_view"
    android:layout_width="15dip"
    android:layout_height="fill_parent"
    android:background="#99CC00" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/row_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dip"
        android:layout_marginTop="5dip"
        android:maxLines="1"
        android:text="@string/title"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/row_subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dip"
        android:layout_marginLeft="10dip"
        android:maxLines="3"
        android:text="@string/subtitle"
        android:textSize="12sp" />

    <View
        style="@style/SeparatorLine"
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:layout_marginTop="5dip" />
</LinearLayout>