title: Why are my buttons' click areas too small inside a CollapsingToolbarLayout?
body: <p>I've got three buttons inside a <code>CollapsingToolbarLayout</code>. 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.</p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/z4VN8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/z4VN8.png" alt="Zone of clickability"></a></p>
  
  <p>You can touch them normally left to right, but top to bottom is wrong.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"&gt;
  
      &lt;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"&gt;
  
          &lt;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"&gt;
  
              &lt;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"&gt;
  
                  &lt;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" /&gt;
  
                  &lt;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" /&gt;
  
                  &lt;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" /&gt;
  
              &lt;/LinearLayout&gt;
  
              &lt;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"/&gt;
  
          &lt;/android.support.design.widget.CollapsingToolbarLayout&gt;
  
      &lt;/android.support.design.widget.AppBarLayout&gt;
  
      &lt;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" /&gt;
  
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>
  
  <p>Then, in my <code>onViewCreated()</code> 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.</p>
  
  <p>Workaround and adjustments I have already tried:</p>
  
  <ul>
  <li>Switching from <code>ImageView</code>s to <code>FloatingActionButton</code>s, and finally <code>ImageButton</code>s</li>
  <li>Slapping <code>android:fitsSystemWindows="true"</code> on different views, including <em>all</em> of them</li>
  <li>Changing button dimensions from <code>wrap_content</code> to explicitly the size defined in the <code>VectorDrawable</code>s they are displaying</li>
  <li>Setting <code>android:minHeight</code> on the <code>LinearLayout</code> to the same explicit size as the buttons</li>
  <li>Making the <code>layout_weight</code> of each button 1.0, and setting the sum to 3.0</li>
  <li>Trying the <code>app:layout_collapseMode</code> variously as <code>paralax</code> and <code>none</code> on the <code>LinearLayout</code> that houses the buttons.</li>
  </ul>
  
  <p>The only similar issue I've been able to find on SO is this: <a href="https://stackoverflow.com/questions/31216336/appbarlayout-and-collapsingtoolbarlayout-not-able-to-contain-button">AppBarLayout and CollapsingToolbarLayout not able to contain Button?</a> No satisfactory answer was ever provided, just a workaround of moving the button outside of the collapsing area.</p>
  
  <p>Thoughts?</p>