TabIndicator disappears when trying to use app:tabIndicator

Issue

I am trying to assign a custom Drawable to my Tablayout. The Problem is that when I do this, the Tablayout becomes invisible on my Samsung Galaxy S7. No problem at Nexus 5X.

Tablayout

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tl_shop_item"
    style="@style/ShapeAppearanceOverlay.RSB3000.ShopTablayout"
    android:layout_width="0dp"
    android:layout_height="16dp"
    android:layout_marginTop="8dp"
    app:layout_constraintEnd_toEndOf="@+id/vp_product"
    app:layout_constraintStart_toStartOf="@+id/vp_product"
    app:layout_constraintTop_toBottomOf="@id/vp_product"
    app:tabIndicator="@drawable/shop_item_tab" <!-- THIS IS THE PROBLEM -->
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorGravity="top"
    app:tabMaxWidth="16dp" />

Drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/blue"/>
    <corners android:radius="5dp"/>
</shape>

Solution

OK, I found a fix:

Tablayout

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tl_shop_item"
    style="@style/ShapeAppearanceOverlay.RSB3000.ShopTablayout"
    android:layout_width="0dp"
    android:layout_height="16dp"
    android:layout_marginTop="8dp"
    app:layout_constraintEnd_toEndOf="@+id/vp_product"
    app:layout_constraintStart_toStartOf="@+id/vp_product"
    app:layout_constraintTop_toBottomOf="@id/vp_product"
    app:tabBackground="@drawable/unselected_shop_item_tab"
    app:tabIndicator="@drawable/selected_shop_item_tab"
    app:tabIndicatorColor="@color/primary"
    app:tabIndicatorGravity="center"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="8dp"
    app:tabMaxWidth="16dp" />

Drawable: Selected_Shop_Item_Tab

<?xml version="1.0" encoding="utf-8"?>
<shape android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="3dp"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/blue" />
</shape>

Drawable: Unselected_Shop_Item_Tab

<?xml version="1.0" encoding="utf-8"?>
<shape android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="3dp"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/grey_light" />
</shape>

Answered By - Andrew