Material 3 Tabs

Overview

Tabs organize content across different screens or data sets.

Material 3 Tabs, built with TabLayout and TabItem, support Fixed and Scrollable variants, adhering to Material Design guidelines. This guide covers implementation, accessibility, and theming.

Using Tabs

• Add Material Components for Android library dependency
• Use TabLayout with TabItems for static tabs
• Integrate with ViewPager or ViewPager2 for dynamic tabs
• Apply Theme.Material3.* theme for styling

Accessibility

• Set android:contentDescription on TabLayout and individual tabs for TalkBack
• Use BadgeDrawable content descriptions for badges
• Ensure sufficient contrast for text and icons

Behavior and Configuration

• Configure tabs with text, icons, or badges
• Use tabMode for Fixed or Scrollable behavior
• Handle tab selection with OnTabSelectedListener
• Integrate with ViewPager2 using TabLayoutMediator

      
val tabLayout = findViewById<TabLayout>(R.id.tab_layout)
tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) { /* Handle selection */ }
    override fun onTabReselected(tab: TabLayout.Tab?) { /* Handle reselect */ }
    override fun onTabUnselected(tab: TabLayout.Tab?) { /* Handle unselect */ }
})
      
    

Tabs Variants

1. Fixed Tabs: Display all tabs with equal width
2. Scrollable Tabs: Allow scrolling for more tabs

Fixed Tabs

• Show all tabs on one screen with equal widths
• Ideal for limited tab sets
• Uses TabLayout, TabItem

Example

      
<com.google.android.material.tabs.TabLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:contentDescription="@string/tabs_desc"
    app:tabMode="fixed">
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/explore"
        android:icon="@drawable/ic_explore_24dp"/>
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/flights"
        android:icon="@drawable/ic_flight_24dp"/>
</com.google.android.material.tabs.TabLayout>
      
    

      
val tabLayout = findViewById<TabLayout>(R.id.tab_layout)
tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) { /* Switch content */ }
    override fun onTabReselected(tab: TabLayout.Tab?) {}
    override fun onTabUnselected(tab: TabLayout.Tab?) {}
})
      
    

Scrollable Tabs

• Allow horizontal scrolling for more tabs
• Ideal for dynamic or large tab sets
• Uses TabLayout, TabItem

Example

      
<com.google.android.material.tabs.TabLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:contentDescription="@string/tabs_desc"
    app:tabMode="scrollable">
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tab_1"/>
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tab_2"/>
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tab_3"/>
</com.google.android.material.tabs.TabLayout>
      
    

      
val tabLayout = findViewById<TabLayout>(R.id.tab_layout)
tabLayout.getTabAt(1)?.getOrCreateBadge()?.apply {
    number = 5
    isVisible = true
}
tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) { /* Switch content */ }
    override fun onTabReselected(tab: TabLayout.Tab?) {}
    override fun onTabUnselected(tab: TabLayout.Tab?) {}
})
      
    

Anatomy and Key Properties

Component	Description	Fixed Tabs	Scrollable Tabs
Container	Holds tabs, 48dp/72dp height	Equal-width tabs	Variable-width tabs
Tab Item	Active/inactive, with icon/text	Fixed width	Content-based width
Indicator	Marks active tab, 2dp height	Full tab width	Matches tab content width

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Component Type
Container	app:tabMode	setTabMode	fixed	Sets Fixed or Scrollable behavior	All variants
Text	android:text	setText	null	Sets tab label text	All variants
Icon	android:icon	setIcon	null	Sets tab icon	All variants
Indicator	app:tabIndicatorColor	setSelectedTabIndicatorColor	colorPrimary	Sets active tab indicator color	All variants

Styles

• Default style: Widget.Material3.TabLayout
• Secondary style: Widget.Material3.TabLayout.Secondary
• Default theme attribute: ?attr/tabStyle

Theming Tabs

• Customize colors and typography
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimary">@color/shrine_pink_900</item>
    <item name="colorSurface">@color/shrine_pink_light</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="tabStyle">@style/Widget.App.TabLayout</item>
</style>
<style name="Widget.App.TabLayout" parent="Widget.Material3.TabLayout">
    <item name="tabTextColor">@color/shrine_pink_900</item>
    <item name="tabIndicatorColor">@color/shrine_pink_900</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Tabs
• Covers design, behavior, theming specifications
• Includes structure, variants, accessibility requirements
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Tabs?

• Controls for organizing content across screens or data sets

---

How many variants are there?

• Two variants: Fixed and Scrollable

---

When to use Scrollable Tabs?

• Use for large or dynamic tab sets

---

How to make them accessible?

• Set contentDescription for TalkBack on tabs and badges

---

Can I customize appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for tabs