Click on the top half of a button - doesn't work?

Question

I have 4 Relative layouts : ( as you can see in the animation)

• The green RelativeView
• The "type something & icons" RelativeView
• The gray speperator RelativeView
• The bottom Textview

Each RelativeView is "below" it's previous relative view.

By design , when the 2 inner views are closed , the button should be half top above the green , and half bottom above the text ( just like the animation shows)

Ok , So I added a button which is found inside the "bottom textview"

But in order for the bottom to be only half bottom above the view , I added it a negative Margin :

So here it is without the negative margin :

And here it is with the negative margin ( the desired result)

So when I clicked the button I simply hide/show ( + animation with android:animateLayoutChanges="true") the inner 2 middle views

So where is the problem ?

Question

I don't know why but only the bottom half of the button is clickable ! I guess it is because that half is inside its container view while the top half is not in its view...( maybe i'm wrong)

But if I remove the negative margin and the button is fully in its container - then the button is 100% fully clickeable ( both top half and bottom half)

As you can see in the animation (last frames) - when i click the top half - nothing happens....

How can I fix that ?

Maybe i've taken a wrong initial approach ?

nb : some more visualization of structure :

Answer 1

Have your button as a sibling to the RelativeLayouts rather than as a child. This works as you want it to.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true">![enter image description here][1]

    <RelativeLayout
        android:id="@+id/red"
        android:background="@android:color/holo_red_dark"
        android:layout_width="match_parent"
        android:layout_height="100dp">

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/green"
        android:layout_below="@id/red"
        android:background="@android:color/holo_green_dark"
        android:layout_width="match_parent"
        android:layout_height="100dp">

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/blue"
        android:background="@android:color/holo_blue_dark"
        android:layout_below="@id/green"
        android:layout_width="match_parent"
        android:layout_height="100dp">

    </RelativeLayout>

    <Button
        android:id="@+id/button"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/green"
        android:layout_width="wrap_content"
        android:text="Hide Green"
        android:layout_marginTop="-24dp"
        android:layout_height="wrap_content"/>

</RelativeLayout>

Looks like this and the button moves up/down as setVisibility is toggled between GONE/VISIBLE for green RelativeLayout

Answer 2

Your button belongs to bottom RL. When android routes ACTION_DOWN it checks layout's borders and gives events to viewgrops (VG) which have event coordinates inside. Then VG proporate event to it's children based on it's coordinates.

So when you click on upper part of your button touch event given to grey RL and button which belonges to blue RL doesn't get it. Actually event given to Window -> Root ViewGroup -> Some Other ViewGroup -> View. And routing happens base on coordinates. It is true for ACTION_DOWN which starts touch, but not all MotionEvent processed this way.

As a solution, you can move button to another groupview which can route touch event properly. Or maybe try to use touch delegates.