Material Design

Tab Layout

TabLayout provides a horizontal layout to display tabs. The layout handles interactions for a group of tabs including:

  • scrolling behavior,
  • (swipe) gestures,
  • tab selection,
  • animations,
  • and alignment.

The Android Developers site provides detailed documentation on implementing TabLayout.

Design & API Documentation

Usage

To use a TabLayout with a static number of tabs, define each tab as a TabItem directly in the layout.

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

  <com.google.android.material.tabs.TabItem
      android:icon="@drawable/ic_icon_a_24"
      android:text="@string/tab_a_label"/>
  <com.google.android.material.tabs.TabItem
      android:icon="@drawable/ic_icon_b_24"
      android:text="@string/tab_b_label"/>
  <com.google.android.material.tabs.TabItem
      android:icon="@drawable/ic_icon_c_24"
      android:text="@string/tab_c_label"/>

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

A tab layout should be used above the content associated with the respective tabs and lets the user quickly change between content views. These content views are often held in a ViewPager.

Use setupWithViewPager(ViewPager) to link a TabLayout with a ViewPager. The individual tabs in the TabLayout will be automatically populated with the page titles from the PagerAdapter.

ViewPager pager;
TabLayout tabs = (TabLayout) findViewById(R.id.tabs);

tabs.setupWithViewPager(pager);

Alternatively, you can add a TabLayout to a ViewPager in XML:

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <com.google.android.material.tabs.TabLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="top" />

</android.support.v4.view.ViewPager>

Material Styles

Using TabLayout with an updated Material theme (Theme.MaterialComponents) will provide the correct updated Material styles to your tabs by default. If you need to use updated Material tabs and your application theme does not inherit from an updated Material theme, you can apply one of the updated Material styles directly to your widget in XML.

Updated Material Style (Default)

The updated Material TabLayout style consists of updated icon and label tints, ripple color, and ripple shape.

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

Colored Material Style

The colored Material TabLayout style consists of updated background color based on ?attr/colorAccent.

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

Legacy Material Style

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

Attributes

Feature Relevant attributes
Size app:tabMinWidth
app:tabMaxWidth
Scroll app:tabMode
Centered app:tabGravity
Background app:tabBackground
Icon app:tabIconTint
app:tabIconTintMode
Label app:tabInlineLabel
app:tabTextAppearance
app:tabTextColor
app:tabSelectedTextColor
Indicator app:tabIndicatorColor
app:tabIndicatorHeight
app:tabIndicator
app:tabIndicatorGravity
app:tabIndicatorFullWidth
Position app:tabContentStart
app:tabPaddingStart
app:tabPaddingTop
app:tabPaddingEnd
app:tabPaddingBottom
app:tabPadding
Ripple app:tabRippleColor