Apply new Google Style to your Android Material Tabs

Little snippet to style your material tabs to look like the tabs google is using for several of its products.

New Google Style for tabs

I recently got a small job to do improvements to an Android Native Application. While i was doing the re-design i really wanted to take any trace of material design from the UI. It’s not like i hate Material Design or something like that (i think is a great design system), but it has been so used in recent years that for me is really boring and it gives a generic application look.

And when i had to do some improvements to a screen that was using the Material TabLayout Component, i used it as an excuse to implement the new google tabs that can be seen in several of its products (like Play Store, or the awesome Firebase Console).

Get the full source code on this Gitub Repository.

Firebase Console

Let’s start then, first of all you have to install the Material Components Library For Android on your Android project. Then, put the following attributes to your TabLayout.

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/tab_layout_bg"
    app:tabTextColor="#476282"
    app:tabRippleColor="@android:color/transparent"
    app:tabIndicator="@drawable/tab_indicator"
    app:tabIndicatorFullWidth="false"
    app:tabSelectedTextColor="@color/colorPrimary"
    app:tabTextAppearance="@style/AppTheme.Tabs.TextAppearance">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One Tab">
    </com.google.android.material.tabs.TabItem>
    <!-- other tabs -->
</com.google.android.material.tabs.TabLayout>

I’m using app:tabRippleColor=”@android:color/transparent”, to remove the ripple effect on the tabs.

I set android:background to a drawable called tab_layout_bg to get the bottom border. Here’s the code for the drawable.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/white" />
        </shape>
    </item>
    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="#c3cfdd" />
        </shape>
    </item>
</layer-list>

To get the nice tabs indicators, i set the <well> called app:tabIndicator attribute with the following drawable.

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:topRightRadius="3dp" android:topLeftRadius="3dp"></corners>
    <size android:height="3dp"></size>
</shape>

And lastly, i use this text appearance to prevent the tabs from capitalizing the text (which is the default behaviour).

<!-- styles.xml -->
<style name="AppTheme.Tabs.TextAppearance" parent="TextAppearance.Design.Tab">
    <item name="textAllCaps">false</item>
    <item name="android:textAllCaps">false</item>
</style>

And it’s Done. With this we got our new shiny tabs on Android. Thanks for reading until the end, i hope you enjoyed this article.