Question

NOTE: if you are here because you face similar issue, please ensure you read and try all answers provided. It appeared that under some circumstances one may work better than another. So do your own tests as well!

PREFACE

I got listview’s row layout like this (this is stripped down version of my real layout so do not comment of things like single elements wrapped in LinearLayout etc. – it just to illustrate the issue – final version got more elements there):

XML file is below for reference, but I shortly describe what I want to achieve:

• blue box (icon) and “usually long text here” TextView are row “real” content (item_main_container). It can be anything – it shall be irrelevant. This layer content is not clickable. In fact (but I just realized that) I should show the “blue box” to be half covered by red and half covered by green box from next layer.
• the red and green boxes are views I bind row’s OnCliclListeners to (wrapped in item_click_area_container)- I just want user to be able to tap on the row, no matter what’s item_main_container‘s content really is (so these red/green are transparent in the app). NOTE: These are set transparent on the image so you can see item_main_content thru it, but it is just for demonstration purposes. Please also note red and green represent separate actions and I need to be able to have more elements on item_click_area_container layer to be able to handle more actions depending on where user tapped.
• the yellow area (button_bar_container) holds buttons user may want to tap.

So basically item_click_area_container overlays item_main_container, but not button_bar_container, which is above item_click_area_container otherwise user would not be able to tap on any of its button. In perspective it would be:

Layout outline looks like this:

---

PROBLEM

I am unable to make item_click_area_container stretch correctly to overlay whole item_main_container as it should, despite my efforts. Since "usually long text here" text can be of any length, I do not know what’s the height of item_main_container. In the XML below there’s android:layout_height="100dp – this works in terms I see all row elements, however for longer texts item_click_area_container height is too small. But if I replace it with android:layout_height="fill_parent" then the whole item_click_area_container is not visible, which defeats the purpose.

---

QUESTIONS

1. Why this is not working as expected and/or how to fix that?
2. Is there any better way of having content independent click areas than using approach like mine item_click_area_container (but no OnTouchListener based solutions)?

---

LAYOUT XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="fill_parent" 
          android:layout_height="wrap_content">

        <LinearLayout 
            android:id="@+id/item_main_container"
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content">

            <ImageView 
               android:id="@+id/item_avatar" 
               android:layout_width="40dp" 
               android:layout_height="40dp" 
               android:background="#0000ff" 
               android:src="@drawable/icon_help"/>

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

               <TextView android:id="@+id/item_body" 
                 android:layout_width="fill_parent" 
                 android:layout_height="fill_parent" 
                 android:text="Usually long text here..." 
                 android:textColor="#ffffff"/>
            </LinearLayout>

        </LinearLayout>

        <LinearLayout 
               android:id="@+id/item_click_area_container" 
               android:layout_width="fill_parent" 
               android:layout_height="100dp">
            <LinearLayout 
               android:id="@+id/green_click" 
               android:layout_width="fill_parent" 
               android:layout_height="fill_parent" 
               android:layout_weight="1" 
               android:background="#7700ff00">
            </LinearLayout>
            <LinearLayout 
               android:id="@+id/red_click" 
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:layout_weight="2" 
               android:background="#77ff0000">
            </LinearLayout>
        </LinearLayout>

    </RelativeLayout>

    <LinearLayout 
       android:id="@+id/button_bar_container" 
       android:layout_width="fill_parent" 
       android:layout_height="50dp" 
       android:layout_marginTop="3dp" 
       android:background="#ffff00">
    </LinearLayout>

</LinearLayout>

---

EDIT #1

I think I could use OnTouchListener, and in onTouch() check event.getAction() and if it is MotionEvent.ACTION_DOWN read X/Y of the event and check against view’s bounds. This might do the trick, still, I would prefer to stick to OnClickListener alone if possible. Not to mention it’d help to understand what the current culprit is, especially layout renders correctly in ADT

Answer 1

Here you go this layout will work. The simple solution is to align the 4 sides of item_click_area_container to the corresponding 4 sides of item_main_container using these 4 lines:

        android:layout_alignTop="@+id/item_main_container"
        android:layout_alignBottom="@+id/item_main_container"
        android:layout_alignLeft="@+id/item_main_container"
        android:layout_alignRight="@+id/item_main_container"

Here is your Layout with wrap_content height. No more hardcoded sizes (:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/item_main_container"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/item_avatar"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="#0000ff"
                android:src="@drawable/ic_action_search" />

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

                <TextView
                    android:id="@+id/item_body"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:text="Usually long text hasdkfn ash jsjkgh sjhgjk hasjkh ash fjk hasdjkh fkjash jkdf hjkasdh fjkhasjkg hjkasjkd hfjkash gsdgh kgh sdfh fjksah djkfasd jkg jsdf asgjf sg sd agfgas fjhasg f asdgf gjhsdg sdjhsdg fasdfjhs agjhfg  adf asdg jh dvhsdvjhas gdh fv gsfjivhdfvjksfgjkdhjhixcgzvjk gdshg dfg v gvgdfgvjkshvjksdgvsdvere..."
                    android:textColor="#000" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_alignTop="@+id/item_main_container"
            android:layout_alignBottom="@+id/item_main_container"
            android:layout_alignLeft="@+id/item_main_container"
            android:layout_alignRight="@+id/item_main_container"
            android:id="@+id/item_click_area_container"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <LinearLayout
                android:id="@+id/green_click"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="#7700ff00" >
            </LinearLayout>

            <LinearLayout
                android:id="@+id/red_click"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="2"
                android:background="#77ff0000" >
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/button_bar_container"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_marginTop="3dp"
        android:background="#ffff00" >
    </LinearLayout>

</LinearLayout>