Android TabLayout 按制表符未正确实现

Android TabLayout pressing tab not correct fulfilled

我曾使用选项卡布局来实现底部导航,效果很好。我遇到的一个问题是,如果我按下一个选项卡或按住它更长的时间,不是整个高度都会变色,只是图像所在的位置和下面的文本。为了演示,我拍了一张图片:

Demonstration of the design problem

我在 TabLayout 中将高度设置为 56dp,并使用以下代码指定了 TabLayout 的一个选项卡:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:scaleType="centerInside" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:textAllCaps="false"
        android:textColor="@color/tab_color"
        android:textSize="12sp"
        tools:text="Recents" />
</LinearLayout>

TabLayout 定义在 activity:

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_bottom"
        style="@style/AppTabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="?attr/colorPrimary"
        />

由于Material 设计调整,我删除了 Github 中的 TabLayout 并使用了 BottomBar。