Android child view height not match parent in ListView item

Question

As described, my List item is a FrameLayout, there are two views inside.

ColorView is a custom view I made for show color in whole view.

(FrameLayout's height is "wrap_content")

It seems work well on my ICS device, but doesn't work on my Android 2.2 emulator and Android 1.6 G1.

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

    <org.mariotaku.twidere.view.ColorView
        android:id="@+id/status_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="@drawable/ic_label_user"/>

    <RelativeLayout
        android:id="@+id/status_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="6dp"
        android:paddingRight="6dp"
        android:paddingTop="6dp">

        <org.mariotaku.twidere.view.RoundCorneredImageView
            android:id="@+id/profile_image"
            android:layout_width="@dimen/profile_image_size"
            android:layout_height="@dimen/profile_image_size"
            android:layout_marginLeft="6dp"
            android:scaleType="fitCenter"/>

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignWithParentIfMissing="true"
            android:layout_marginLeft="6dp"
            android:layout_toLeftOf="@+id/time"
            android:layout_toRightOf="@+id/profile_image"
            android:singleLine="true"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="?android:attr/textColorPrimary"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/name"
            android:layout_alignParentRight="true"
            android:layout_alignWithParentIfMissing="true"
            android:layout_below="@+id/name"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="?android:attr/textColorSecondary"/>

        <TextView
            android:id="@+id/time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/name"
            android:layout_alignParentRight="true"
            android:layout_alignWithParentIfMissing="true"
            android:drawablePadding="3dp"
            android:gravity="center_vertical|right"
            android:textColor="?android:attr/textColorSecondary"/>

        <ImageView
            android:id="@+id/image_preview"
            android:layout_width="@dimen/preview_image_size"
            android:layout_height="@dimen/preview_image_size"
            android:layout_alignWithParentIfMissing="true"
            android:layout_below="@+id/text"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="3dp"
            android:layout_toRightOf="@+id/profile_image"
            android:background="@drawable/image_preview_background"
            android:drawablePadding="3dp"
            android:scaleType="fitCenter"
            android:visibility="gone"/>

        <TextView
            android:id="@+id/reply_retweet_status"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignWithParentIfMissing="true"
            android:layout_below="@+id/image_preview"
            android:layout_toRightOf="@+id/profile_image"
            android:drawablePadding="3dp"
            android:paddingLeft="6dp"
            android:paddingTop="3dp"
            android:textColor="?android:attr/textColorSecondary"/>
    </RelativeLayout>

    <TextView
        android:id="@+id/list_gap_text"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="@string/tap_to_load_more"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textStyle="bold"
        android:visibility="gone"/>

</FrameLayout>

does it have any workaround or other way to solve this?

EDIT

code for ColorView

package org.mariotaku.twidere.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;

public class ColorView extends View {

    private int mColor = Color.TRANSPARENT;

    public ColorView(Context context) {
        this(context, null);
    }

    public ColorView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ColorView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public void setColor(int color) {
        mColor = color;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(mColor);
    }

}

Answer 1

We just had to deal with a similar problem. We noticed that using match_height on a view that is part of a ListView item will not work as expected. The following code should work:

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/color_bar" >

        <!-- Put the content views of your item here. You do not have to use frame layout, it can be any kind of view. -->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="@string/app_name" />
    </FrameLayout>

    <View
        android:id="@id/color_bar"
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:layout_alignBottom="@id/content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@id/content"
        android:background="@android:color/darker_gray" />

</RelativeLayout>

The trick is basically to align the coloured view to the top and bottom of the content view. Whatever the height of the content is, it will be adopted by the coloured view.

On a side note, as stated in the Android's documentation, you should not use a FrameLayout to contain more than one child.

EDIT

My colleague made me notice that if we use a LinearLayout as the root element of the listview item, match_parent works as expected:

<?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="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="8dp"
        android:text="@string/app_name" />

    <View
        android:id="@+id/color_bar"
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray" />

</LinearLayout>

I tested this on a device with Android 2.2 and it worked correctly.