Android TabLayoutタブが正しく表示されていません。

Question

ちょっとしたことがありました。私が立ち往生している問題の1つは、タブを押したり長押ししたりすると、画像全体と下のテキストが表示されます。私はTabLayoutで56dpする高さを設定

Demonstration of the design problem

と、このコードでTabLayoutのタブを1つ指定：デモのために私は、画像を取っ

<?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アクティビティで定義される：

<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" 
 
     />

Answer 1

私はTabLayoutを削除して、材料設計の適応へのGithubからBottomBarを使用。