styling android TabLayout material design

If you want to style android Widget.MaterialComponents.TabLayout you can customize style with different properties

changing tab text color can be done with property <item name="tabTextColor">@color/red</item>

changing tab selected text color with property <item name="tabSelectedTextColor">@color/black</item>

updating height of the underline below tab can be done using <item name="tabIndicatorHeight">2dp</item>

changing the underline color in the bottom of the text of the tab can be done using property <item name="tabIndicatorColor">@color/red</item>

If you want multiple tabs and you want them to be scrollable can be done using <item name="tabMode">scrollable</item>

   you can set tabMode fixed where it can displays all tabs with divided equally

If you have Icon with text for your tab you can set app:tabInlineLabel property setting false label will be below icon , true will show label next to the icon.

<style name="TabStyle" parent="Widget.MaterialComponents.TabLayout">
    <item name="tabTextColor">@color/black</item>
    <item name="android:background">@color/white</item>
    <item name="tabIndicatorColor">@color/red</item>
    <item name="tabIndicatorFullWidth">false</item>
    <item name="tabInlineLabel">true</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabMode">scrollable</item>
    <item name="tabSelectedTextColor">@color/black</item>
</style>

you can set TextAppearance property individually with custom font 

<item name="android:textAppearance">@style/tabTextStyle</item>




<style name="tabTextStyle" parent="TextAppearance.MaterialComponents.Headline2">
        <item name="fontFamily">@font/font_name</item>
        <item name="android:fontFamily">@font/font_name </item>
        <item name="android:textSize">16sp</item>
</style>

tabInlineLabel = true

tabInlineLabel = false

above all screenshots are app:tabMode="fixed" which all equally divided when you switch to scrollable all those will be left aligned 

app:tabMode="scrollable"

Below is the example of using TabLayout with MaterialComponents and style

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="TabStyleExample" parent="Widget.MaterialComponents.TabLayout">
        <item name="tabTextColor">#000000</item>
        <item name="android:background">#ffffff</item>
        <item name="tabIndicatorColor">#ff0000</item>
        <item name="tabIndicatorFullWidth">false</item>
        <item name="tabInlineLabel">true</item>
        <item name="tabIndicatorHeight">2dp</item>
        <item name="tabMode">scrollable</item>
        <item name="tabSelectedTextColor">#00ff00</item>
    </style>


</resources>

layout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        style="@style/TabStyleExample"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_launcher_background"
            android:text="tab 1" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_launcher_background"
            android:text="tab 2" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_launcher_background"
            android:text="tab 3" />

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

</LinearLayout>

If you get error inflating tablayout something like below :

Caused by: android.view.InflateException: Binary XML file line #10: Error inflating class com.google.android.material.tabs.TabLayout

     Caused by: java.lang.reflect.InvocationTargetException

one of the possible reason is the style you are setting for tab layout which extends Widget.MaterialComponents.TabLayout but your app parent theme is still using old parent style not from material design library something like this <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> material design library requires you use new material library for parent app theme so you may require to change the parent app theme to <style name="AppTheme" parent="Theme.MaterialComponents"> another work around for this is if you set layout level theme for your parent layout to Theme.MaterialComponents.Bridge

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:theme="@style/Theme.MaterialComponents.Bridge"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        style="@style/TabStyleExample"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_launcher_background"
            android:text="tab 1" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_launcher_background"
            android:text="tab 2" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_launcher_background"
            android:text="tab 3" />

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

</LinearLayout>