Ultimate Guide to Material 3 Tabs in Android XML (2025 Tutorial + Examples)

Ultimate Guide to Material 3 Tabs in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Material 3 Tabs organize content across different screens or data sets, available as Fixed or Scrollable variants. This guide covers their implementation, accessibility, and theming for 2025 using TabLayout and TabItem. 📑

Design and API Documentation 🔗

• Google Material 3 Tabs Spec
• API Reference

Using Tabs 🤖

Add the Material Components for Android library dependency to use Material 3 Tabs. See the Get Started guide. Use TabLayout with TabItems for static tabs or integrate with ViewPager/ViewPager2 for dynamic tabs, with a Theme.Material3.* theme. 🛠️

Making Tabs Accessible ♿

Set android:contentDescription on TabLayout and individual tabs for TalkBack. Use BadgeDrawable content descriptions for badges. Ensure sufficient contrast for text/icons. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Configure tabs with text, icons, or badges. Use tabMode to set Fixed or Scrollable behavior. Handle tab selection with OnTabSelectedListener. Integrate with ViewPager2 using TabLayoutMediator. Example:

      
val tabLayout = findViewById(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 🌟

Material 3 Tabs come in two variants: Fixed (all tabs visible) and Scrollable (tabs scroll horizontally). 📑

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

Fixed Tabs 📌

Fixed Tabs show all tabs on one screen with equal widths, ideal for limited tab sets. 📌

Fixed Tabs Example 💻

API and source code:

• TabLayout
  • Class description
  • Class source
• TabItem
  • Class description
  • Class source

The following example shows a row of fixed tabs.

      
val tabLayout = findViewById(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 📜

Scrollable Tabs allow horizontal scrolling for more tabs, ideal for dynamic or large tab sets. 📜

Scrollable Tabs Example 💻

The following example shows a row of scrollable tabs with badges.

      
val tabLayout = findViewById(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 📏

Tabs include a container, tab items with optional icons/text, and an active tab indicator. 📑

• Container: Holds tabs, 48dp/72dp height.
• Tab Item: Active/inactive, with icon/text. 🖱️
• Indicator: Marks active tab, 2dp height. 📍

Attributes 📋

Element	Attribute	Related method(s)	Default value
Container	app:tabMode	setTabMode	fixed
Text	android:text	setText	null
Icon	android:icon	setIcon	null
Indicator	app:tabIndicatorColor	setSelectedTabIndicatorColor	colorPrimary

Styles 🎨

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

See the full list of styles and attrs. 🔗

Theming Tabs 🖌️

Material Theming customizes tab colors and typography. 🎨

Theming Example 💻

Theming example for tabs:

Specific styles for tabs without affecting other components:

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 colors and typography via res/values/styles.xml. 🖌️

---

How to add the Material 3 library? 📦

Include the Material Components for Android library. See the Get Started guide. 🛠️

---

Are there updates for 2025? 🗓️

This guide reflects 2025 Material 3 standards for tabs. 🚀