Clipped button doesn't receive touch input

Question

I have a FAB that resides in between two layouts. Using negative margin alongside with android:clipChildren and android:clipToPadding both set to false I'm able to produce this pleasantly placed little button:

Now, the problem is that the bottom half of the FAB isn't receiving touch input or in other word: not clickable. I've tried playing around with android:elevation making sure that it sits in the highest Z-value possible but the problem remains. The top-half, meanwhile, is working just fine.

I'm kinda stuck on this, could anyone here help me on what to do? Below is my XML for the layout, in case you need it.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rl_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:clipToPadding="false">

    <id.ridsatrio.taggr.widgets.ObservableScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?android:attr/windowBackground"
            android:clipChildren="false"
            android:clipToPadding="false"
            android:focusable="true"
            android:focusableInTouchMode="true">

            <id.ridsatrio.taggr.widgets.SquaredImageView
                android:id="@+id/iv_details_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:adjustViewBounds="true"
                android:background="?android:attr/selectableItemBackground"
                android:clickable="true"
                android:contentDescription="Album Art Image"
                android:elevation="@dimen/elevation_none"
                android:focusable="true"
                android:scaleType="centerCrop"
                android:src="@drawable/def_album_art" />

            <View
                android:id="@+id/v_anchor"
                android:layout_width="match_parent"
                android:layout_height="@dimen/details_header_height"
                android:layout_below="@+id/iv_details_header"
                android:elevation="@dimen/elevation_low" />

            <LinearLayout
                android:id="@+id/ll_track_fields"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/v_anchor"
                android:orientation="vertical">

                ...

            </LinearLayout>

            <View
                android:id="@+id/v_divider"
                android:layout_width="match_parent"
                android:layout_height="@dimen/details_section_divider_height"
                android:layout_below="@id/ll_track_fields"
                android:layout_marginLeft="@dimen/details_section_divider_margin_start"
                android:layout_marginTop="@dimen/item_horizontal_margin_xlarge"
                android:background="@color/dividers_light" />

            <LinearLayout
                android:id="@+id/ll_album_fields"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/v_divider"
                android:orientation="vertical">

                ...

            </LinearLayout>

            <RelativeLayout
                android:id="@+id/rl_header"
                android:layout_width="match_parent"
                android:layout_height="@dimen/details_header_height"
                android:layout_gravity="center_horizontal"
                android:background="@color/primary"
                android:clipChildren="false"
                android:clipToPadding="false"
                android:elevation="@dimen/elevation_low">

                ...

                <com.melnykov.fab.FloatingActionButton
                    android:id="@+id/fab_details"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentLeft="true"
                    android:layout_marginBottom="@dimen/details_header_fab_margin_bottom"
                    android:layout_marginLeft="@dimen/details_header_fab_margin_start"
                    android:background="?android:attr/selectableItemBackground"
                    android:elevation="@dimen/elevation_medium"
                    android:src="@drawable/ic_action_down"
                    fab:fab_colorNormal="@color/primary_dark"
                    fab:fab_colorPressed="@color/primary"
                    fab:fab_type="mini" />

            </RelativeLayout>

        </RelativeLayout>

    </id.ridsatrio.taggr.widgets.ObservableScrollView>

    ...

</RelativeLayout>

Any help would be greatly appreciated. Should you need more details on this, I would also glad to provide more.

Thanks in advance!

---

Edit: Thanks to MoshErsan, I finally able to get this working. Here's my working XML in case anyone encounter the same problem as mine:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rl_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:clipToPadding="false">

    <id.ridsatrio.taggr.widgets.ObservableScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?android:attr/windowBackground"
            android:clipChildren="false"
            android:clipToPadding="false"
            android:focusable="true"
            android:focusableInTouchMode="true">

            <id.ridsatrio.taggr.widgets.SquaredImageView
                android:id="@+id/iv_details_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:adjustViewBounds="true"
                android:background="?android:attr/selectableItemBackground"
                android:clickable="true"
                android:contentDescription="Album Art Image"
                android:elevation="@dimen/elevation_none"
                android:focusable="true"
                android:scaleType="centerCrop"
                android:src="@drawable/def_album_art" />

            <View
                android:id="@+id/v_anchor"
                android:layout_width="match_parent"
                android:layout_height="@dimen/details_header_height"
                android:layout_below="@+id/iv_details_header"
                android:elevation="@dimen/elevation_low" />

            <LinearLayout
                android:id="@+id/ll_track_fields"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/v_anchor"
                android:orientation="vertical">

                ...

            </LinearLayout>

            <View
                android:id="@+id/v_divider"
                android:layout_width="match_parent"
                android:layout_height="@dimen/details_section_divider_height"
                android:layout_below="@id/ll_track_fields"
                android:layout_marginLeft="@dimen/details_section_divider_margin_start"
                android:layout_marginTop="@dimen/item_horizontal_margin_xlarge"
                android:background="@color/dividers_light" />

            <LinearLayout
                android:id="@+id/ll_album_fields"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/v_divider"
                android:orientation="vertical">

                ...

            </LinearLayout>

            <RelativeLayout
                android:id="@+id/rl_header"
                android:layout_width="match_parent"
                android:layout_height="@dimen/details_header_height"
                android:layout_gravity="center_horizontal"
                android:background="@color/primary"
                android:clipChildren="false"
                android:clipToPadding="false"
                android:elevation="@dimen/elevation_low">

                ...

            </RelativeLayout>

            <com.melnykov.fab.FloatingActionButton
                android:id="@+id/fab_details"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/rl_header"
                android:layout_alignLeft="@+id/rl_header"
                android:layout_marginBottom="@dimen/details_header_fab_margin_bottom"
                android:layout_marginLeft="@dimen/details_header_fab_margin_start"
                android:background="?android:attr/selectableItemBackground"
                android:elevation="@dimen/elevation_medium"
                android:src="@drawable/ic_action_down"
                fab:fab_colorNormal="@color/primary_dark"
                fab:fab_colorPressed="@color/primary"
                fab:fab_type="mini" />

        </RelativeLayout>

    </id.ridsatrio.taggr.widgets.ObservableScrollView>

    ...

</RelativeLayout>

If there's a thing to learn from here it's this: Setting android:clipChilden to false will allow said View to draw outside it's parent layout BUT any touch input would still be restricted to the parent's boundaries.

Answer 1

You should move your FAB Z index in the layout to be on the top of the other views in the screen, so when the touch event occurs the FAB should receive the touch event before another views.

and to understand why it doesn't receive touch events in the bottom part of FAB, that because you did use android:clipChildren="false" so actually the parent bounders is smaller than that but the draw happens out side it, so when the touch event is received to the parent first then it tries to divert it to the desired child, and the touch event must be within parent bounders, so the bottom part of FAB is outside the bounders of the parent, and the touch event is not for him.