Android TabLayout pressing tab not correct fulfilled

Question

I kinda worked with the tab layout to implement a bottom navigation, which kinda worked very well. One problem I'm stuck is, that if I press a tab or hold it longer, not the full height gets colored, just where the image is and the text below. For demonstration I took an image:

Demonstration of the design problem

I set the height to 56dp in the TabLayout and specified one tab of the TabLayout with this code:

<?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 definied in the 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"
        />

Answer 1

I deleted the TabLayout and used BottomBar from Github due to Material Design adaption.