Search code examples
androidandroid-drawableandroid-tablayoutandroid-viewpager2

TabIndicator disappears when trying to use app:tabIndicator


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>