Custom styling of com.google.android.material.tabs.TabLayout

Question

I am using the new Google Material Components for Android

Currently, I am trying to give a custom look for Tablayout (com.google.android.material.tabs.TabLayout).

I have created a style as follows:

<style name="AppTheme.TabLayout" parent="Widget.MaterialComponents.TabLayout">
    <item name="android:background">@color/colorPrimary</item>
</style>

However, upon applying this theme, the tab indicator becomes invisible.

Without theme:

With theme:

Also, I tried other things like changing tabIndicatorColor and still not working!

How do I fix this? Which is the correct way to change the colors/theme of Material Components?

Gilges

Answer 1

With these changes, it works as expected:

<com.google.android.material.tabs.TabLayout
     android:id="@+id/tabLayout"
     style="@style/AppTheme.TabLayout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:layout_collapseMode="pin"
     app:tabGravity="fill"
     app:tabTextAppearance="@style/customFontStyle">

     //Tab items maybe

</com.google.android.material.tabs.TabLayout>

Styles.xml:

<style name="AppTheme.TabLayout" parent="Widget.MaterialComponents.TabLayout">
    <item name="android:background">@color/colorPrimary</item>
    <item name="tabIndicatorColor">@color/yourcolor</item>
</style>

Result:

Recognize

I was using android:theme instead of style and that's what caused the issue! – Gilges

Answer 2

As of now, you should use Widget.MaterialComponents.TabLayout.Colored from here.

Forbidden