Android TabLayout style customization

<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout2"
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:text="Favorite" />

<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="All" />

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

Solid Tabs

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/selectedColor" android:state_selected="true"/>
<item android:drawable="@color/unselectedColor"/>
</selector>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@drawable/tabs_selector">
Solid tabs
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/unselectedColor"

app:tabBackground="@drawable/tabs_selector">

Result:

Rounded Tabs

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/button" />
<corners android:radius="6dp" />
</shape>
Tabs with rounded corners
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="6dp">


<shape android:shape="rectangle">
<solid android:color="@color/button" />
<corners android:radius="6dp" />
</shape>

</item>
</layer-list>
TabItem with padding
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/background_color" />
<corners android:radius="6dp" />
</shape>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:tabBackground="@drawable/tabs_selector"
app:tabIndicator="@null"
android:background="@drawable/tab_layout_bg"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/unselectedColor">

Result:

Final result

Create Style

<style name="RoundedTabLayoutStyle" parent="Widget.Design.TabLayout">
<item name="tabBackground">@drawable/tabs_selector</item>
<item name="tabIndicator">@null</item>
<item name="android:background">@drawable/tab_layout_bg</item>
<item name="tabSelectedTextColor">@color/white</item>
<item name="tabTextColor">@color/unselectedColor</item>
</style>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout2"
style="@style/RoundedTabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store