Why are my buttons' click areas too small inside a CollapsingToolbarLayout?

Question

I've got three buttons inside a CollapsingToolbarLayout. When expanded, the idea is to modify a filter on the image gallery being displayed, or pop up an edit dialog. I was getting inconsistent results–the buttons were only responding to clicks intermittently.

Eventually, I realized the issue was that the clickable area was much smaller than the client rect of the view. Horizontally, they seem normal, but vertically the clickable area is much shorter than the button. In the emulator I was able to get fairly precise as to the bounds:

You can touch them normally left to right, but top to bottom is wrong.

I have been trying to cobble together this layout from various snippets from the docs, official guides, online tutorials, and open source code examples. I don't fully understand how all the fancy support/design layouts work together, or what all of the configuration attributes exactly do when combined, so it's perfectly possible the fix will be a simple change of an attribute or two. Here is my layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".activity.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="?android:actionBarSize"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:contentScrim="?attr/colorPrimary"
            android:background="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            android:theme="@style/Widget.Design.CollapsingToolbar">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:paddingTop="32dp"
                android:paddingBottom="64dp"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="none"
                android:background="@android:color/transparent"
                android:orientation="horizontal">

                <ImageButton android:id="@+id/btnTags"
                             android:layout_width="64dp"
                             android:layout_height="64dp"
                             android:layout_weight="0.3"
                             android:src="@drawable/ic_tag"
                             android:tint="?android:attr/buttonTint"
                             android:background="@drawable/ripple" />

                <ImageButton android:id="@+id/btnAlbums"
                             android:layout_width="64dp"
                             android:layout_height="64dp"
                             android:layout_weight="0.3"
                             android:src="@drawable/ic_albums"
                             android:tint="?android:attr/buttonTint"
                             android:background="@drawable/ripple" />

                <ImageButton android:id="@+id/btnNewAlbum"
                             android:layout_width="64dp"
                             android:layout_height="64dp"
                             android:layout_weight="0.3"
                             android:src="@drawable/ic_new_album"
                             android:tint="?android:attr/buttonTint"
                             android:background="@drawable/ripple" />

            </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbarMain"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="@string/app_name"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/LouvreTheme.ToolbarStyle"/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <co.moonmonkeylabs.realmrecyclerview.RealmRecyclerView
        android:id="@+id/recyclerAlbumGrid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="?android:attr/background"
        app:rrvLayoutType="Grid"
        app:rrvGridLayoutSpanCount="@integer/grid_span"
        app:rrvIsRefreshable="false"
        app:rrvSwipeToDelete="false" />

</android.support.design.widget.CoordinatorLayout>

Then, in my onViewCreated() I assign each of the buttons an OnClickListener. I can reliably and predictably trigger them, but only by clicking in that narrow vertical band pictured above.

Workaround and adjustments I have already tried:

• Switching from ImageViews to FloatingActionButtons, and finally ImageButtons
• Slapping android:fitsSystemWindows="true" on different views, including all of them
• Changing button dimensions from wrap_content to explicitly the size defined in the VectorDrawables they are displaying
• Setting android:minHeight on the LinearLayout to the same explicit size as the buttons
• Making the layout_weight of each button 1.0, and setting the sum to 3.0
• Trying the app:layout_collapseMode variously as paralax and none on the LinearLayout that houses the buttons.

The only similar issue I've been able to find on SO is this: AppBarLayout and CollapsingToolbarLayout not able to contain Button? No satisfactory answer was ever provided, just a workaround of moving the button outside of the collapsing area.

Thoughts?

Answer 1

Turns out the Toolbar actually physically stays up at the top, despite appearing to stretch down with the expanded title text. It was thus partially covering the top two thirds or so of my buttons, which I couldn't tell because the toolbar background was set to transparent. By adding a contrasting background color to the toolbar, it became very obvious what was happening.

I found and tested two simple fixes:

1. add android:layout_marginTop="?android:actionBarSize" to the LinearLayout that was housing the buttons, so it is drawn below the toolbar, in the y direction.
2. swap the order of the toolbar and the buttons in the layout XML; the last one defined is drawn on top, and the buttons become fully clickable.