Odtnhj

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?

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: