Tabs

Tabs organize content across different screens, data sets, and other interactions.

Android check Web Flutter iOS

Interactive demo

This demo lets you preview the tab component, its variations, and configuration options. Each tab displays a different type of tab.


Usage

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Tabs in a set

Each tab should contain content that is distinct from other tabs in a set. For example, tabs can present different sections of news, different genres of music, or different themes of documents.

DoTab labels can include icons and text. Text labels should be short.
Don'tDon’t use tabs to move through sequential content that needs to be read in a particular order.
DoPresent tabs as a single row above their associated content.
Don'tAvoid using tabs for comparing content across multiple tabs, such as different sizes of the same item.

Combinations with other components

Tabs can be paired with components like top app bars, or nested in components like cards and sheets.

Principles

Scalable

As tabs can horizontally scroll, a UI can have as many tabs as needed.

Informative

Tabs organize content into categories to help users easily find different types of information.

Peers

Tabs are displayed next to each other as peers, in categories of equal importance.


Types

Tabs can be fixed or scrollable.

Fixed tabs

Fixed tabs display all tabs on one screen, with each tab at a fixed width. The width of each tab is determined by dividing the number of tabs by the screen width. They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.

Scrollable tabs

Scrollable tabs are displayed without fixed widths. They are scrollable, such that some tabs will remain off-screen until scrolled.


Anatomy

1.Container
2.Active icon (Optional if there’s a label)
3.Active text label (Optional if there’s an icon)
4.Active tab indicator
5.Inactive icon (Optional if there’s a label)
6.Inactive text label (Optional if there’s an icon)
7.Tab item

Text label

Text labels should clearly and succinctly describe the content of the tab they represent. Tab content should contain a cohesive set of items that share...

Text labels should clearly and succinctly describe the content of the tab they represent. Tab content should contain a cohesive set of items that share a common characteristic.

Tab labels appear in a single row. They can use a second line if needed, with truncated text. Alternatively, you can use scrollable tabs to allow room for longer titles.

CautionAlthough label text can wrap to a second line, scrollable tabs confine text to a single row.
Don'tDon’t resize text labels to fit them onto a single line. If labels are too long, wrap text to a second line or use scrollable tabs.
Don'tDon’t truncate labels unless required, as truncated text can impede comprehension.
Don'tDon’t mix tabs that contain only text, with tabs that contain only icons. Use either all text labels, all icon labels, or both, across all labels.

Icons

Icons communicate the type of content a tab represents in a simple, recognizable way. However, they aren’t as effective as text labels at communicating complex...

Icons communicate the type of content a tab represents in a simple, recognizable way. However, they aren’t as effective as text labels at communicating complex content.

Tabs can use a combination of labels and icons.
DoTabs can use icons to communicate content.
Don'tDon’t use tabs with both icons and text labels on only some tabs, but not others.
CautionUse caution when only representing tab content with icons, as an icon’s meaning may not be clear on every topic.

Active tab indicators

To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon.

To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon.

An underline and color change differentiate an active tab from the inactive ones.

Behavior

Moving between tabs

Users can navigate between tabs by tapping a tab, or by performing a swipe gesture over content. Navigate to a tab by tapping on it....

Users can navigate between tabs by tapping a tab, or by performing a swipe gesture over content.

Tap a tab

Navigate to a tab by tapping on it.

Swipe within the content area

To navigate between tabs, users can swipe left or right within the content area.

Use caution when placing other swipeable content (such as interactive maps or list items) in the content area.

CautionUse caution when placing swipeable content in UIs that have tabs, as users could easily swipe the wrong component.
Don'tAvoid placing swipeable items in the content area of a UI that has tabs, as the user may mistakenly swipe the wrong component.

Scrolling

When a screen scrolls, tabs can either be fixed to the top of the screen, or scroll off the screen. If they scroll off the...

When a screen scrolls, tabs can either be fixed to the top of the screen, or scroll off the screen. If they scroll off the screen, they will return when the user scrolls upward.

When tabs are attached to a top app bar, they can scroll off the screen with the bar and lock in place at the top of the screen.
Tabs can scroll offscreen on scroll, and reappear when the page is scrolled up.
Don'tDon’t scroll tabs behind a top app bar. When tabs are attached to a component, they should appear and move as a single unit.

Scaling and adaptation

For fixed tabs, the maximum width for each tab should be determined by the width of the widest tab...

Size constraints

For fixed tabs, the maximum width for each tab should be determined by the width of the widest tab. The group of tabs should use a fluid margin and align to the center or leading edge of the body region.

Diagram of tabs that remain grouped and centered in the body region when adapting for a larger screen
At larger breakpoints, the minimum tab width can be increased and the tab group can be positioned in the center.
Diagram of tabs that remain grouped but align to the leading edge of the body region
Tab groups can also align to the leading edge of the container, as seen in the diagram of a larger layout on the right.

Placement

Tab layout

Tabs are displayed in a single row, with each tab connected to the content it represents. As a set, all tabs are unified by a...

Tabs are displayed in a single row, with each tab connected to the content it represents. As a set, all tabs are unified by a shared topic.

Place tabs above content.
CautionAvoid nesting a tab within another tab.
Don'tDon’t place tabs below one another.

Tab placement

Tabs can be joined with components like top app bars, embedded in a specific UI region, or nested into components like cards and sheets. Tabs...

Tabs can be joined with components like top app bars, embedded in a specific UI region, or nested into components like cards and sheets. Tabs control the UI region displayed below them.

Tabs below a top app bar
Don'tDon’t use tabs with short top app bars, or top app bars that transition to short top app bars on scroll.
Don'tDon’t attach tabs to bottom navigation as it can cause confusion about what action or tab controls which content.

Tabs can be embedded in a specific UI region in order to control the content displayed in that region.

Tabs embedded in a column, the content of which they can control when tapped. Scaled down to 62.5%
Don'tDon’t place tabs above content that they don’t control. If tabs only change a section of the UI, embed them within that section. Scaled down to 62.5%
Tabs nested in a card
Tabs nested in a sheet

Fixed tabs

Usage

Fixed tabs display all tabs in a set simultaneously. They are best for switching between related content quickly, such as between transportation methods in a...

Fixed tabs display all tabs in a set simultaneously. They are best for switching between related content quickly, such as between transportation methods in a map. To navigate between fixed tabs, tap an individual tab, or swipe left or right in the content area.

Use fixed tabs when displaying a limited number of categories.
A fixed tab bar using iconography and labels

Placement

Fixed tabs have equal width, which can be calculated either as: When using fixed tabs, ensure they can all be seen on mobile, without truncating...

Fixed tabs have equal width, which can be calculated either as:

  • The width of the screen divided by the number of tabs
  • The width of the widest tab label

When using fixed tabs, ensure they can all be seen on mobile, without truncating their text. Don’t use more than four fixed tabs at once.

Don’t use more than four fixed tabs in a set.

Reduced in size to 62.5%
On wider layouts, fixed tabs increase in width, as their tab width is determined by the width of the screen.

Reduced in size to 62.5%
CautionAvoid letting fixed tabs cause confusion with content. These tab widths align to closely to the columns in this layout, such that the relationship between tabs and content could be misinterpreted.

Clustered fixed tabs

Clustered fixed tabs aren’t divided equally across the screen. The tab bar is centered, right-aligned, or left-aligned. Clustered fixed tabs should be used in wide...

Clustered fixed tabs aren’t divided equally across the screen. The tab bar is centered, right-aligned, or left-aligned.

Clustered fixed tabs should be used in wide horizontal layouts, such as landscape mode.

On wider layouts, tabs may be centered on the tab bar.
Fixed tabs in a cluster can be aligned to the left or right.

Scrollable tabs

Usage

When a set of tabs cannot fit on screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger number of tabs....

When a set of tabs cannot fit on screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger number of tabs. They are best used for browsing on touch interfaces.

A set of scrollable tabs

Placement

Scrollable tabs display a subset of all tabs at once. The width of each tab is defined by the length of its text label.

Scrollable tabs display a subset of all tabs at once. The width of each tab is defined by the length of its text label.

DoOn mobile and desktop, offset the first tab on the left to signal that tabs are scrollable.
Don'tAvoid using inconsistent padding on each tab.
On desktop, provide a visual indicator that more tabs are available off screen.

Behavior

To navigate between a set of scrollable tabs, users swipe the set left or right. A tab set can be looped so when a user...

To navigate between a set of scrollable tabs, users swipe the set left or right. A tab set can be looped so when a user reaches the last tab in a set, the first tab is shown again.

To select an individual tab, tap it.

Tab placement on activation

When tapped, a scrollable tab should reposition itself to become fully visible on screen.

Active tabs reposition themselves to appear fully on screen.
Active tabs can move to the middle of the row when they become active.

States

By default, tabs inherit enabled states with one active state.

The inactive state of a tab can inherit a hover, focus, and pressed state.

The hover, focus, and pressed states of an enabled tab

The active state of a tab can inherit a hover, focus, and pressed state.

The hover, focus, and pressed states of an active tab

Theming

Basil Material Theme

This recipe app’s tabs have been customized using Material Theming. Areas of customization include color and typography. Basil is a recipe app that uses Material...

This recipe app’s tabs have been customized using Material Theming. Areas of customization include color and typography.

Basil’s customized tabs

Color

Basil’s tabs use custom color on five elements: the container, active text label, active tab indicator, inactive text label, and divider.

Element Category Attribute Value
Container Background Color
Opacity
#FFFBE6
100%
Active text label, active tab indicator Primary Color
Opacity
#356859
100%
Inactive text label On Surface Color
Opacity
#29302E
82%
Divider On Surface Color
Opacity
#29302E
12%

Typography

Basil’s tabs uses custom typography for message and button text.

Element Category Attribute Value
Button Button Typeface
Font
Size
Case
Montserrat
Bold
14
All caps

Specs

Fixed tabs

14dp #6200ee 14dp #19191999 #6200ee R98 G0 B238 #00000089 R0 G0 B0 A0.54 #6200ee R98 G0 B238 Elevation 0dp All measurements are displayed in device-independent...

  • Measurement 360
  • Measurement 48
  • Measurement 48
  • Measurement 72
  • Measurement C
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 20
  • Measurement 12
  • Measurement 2
  • Measurement 12
  • Measurement 12
 

Scrollable tabs

14dp #19191999 14dp #6200ee #6200ee R98 G0 B238 Elevation 0dp All measurements are displayed in device-independent pixels (dps) 14dp #6200ee #6200ee R98 G0 B238 Elevation...

  • Measurement 48
  • Measurement 360
  • Measurement 52
  • Measurement min-width:90dp
  • Measurement C
 

Tab item minimum width

  • Measurement 48
  • Measurement 360
  • Measurement 52
  • Measurement min-width:90dp
  • Measurement C
 

Tab item maximum width

  • Measurement 360
  • Measurement 48
  • Measurement 2
  • Measurement 16
  • Measurement 16
  • Measurement C
 

Using tabs

Before you can use Material tabs, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Basic usage

Three fixed tabs with one tab selected.

A TabLayout can be added to a layout like so:

TabItems can then be added as children of the TabLayout and adjusted as needed:

Changes to tab selection can be observed like so:

Making tabs accessible

The Android tab components support screen reader descriptions for tabs and badges . While optional, we strongly encourage their use.

Content descriptions

Adding a content description to the entire TabLayout can be done in XML with the android:contentDescription attribute or programmatically like so:

Content descriptions can also be added to individual tabs:

BadgeDrawable also has a number of content description setters for different badge states:

Using tabs with ViewPager

A TabLayout can be setup with a ViewPager in order to:

  • Dynamically create TabItems based on the number of pages, their titles, etc.
  • Synchronize the selected tab and tab indicator position with page swipes

Firstly, your PagerAdapter (or subclass) needs to overrride the getPageTitle function in order to set the tab text label:

After the adapter has been set on the ViewPager, synchronize the TabLayout like so:

Further customization of the dynamically-created TabItems (such as setting icons) needs to be done separately:

Using tabs with ViewPager2

Setting up a TabLayout with a ViewPager2 relies on the same concepts as doing so with a ViewPager, but the implementation is different. Everything is handled by the TabLayoutMediator class:

Adding badges to tabs

Example of 3 fixed tabs with badges: a red dot, a red badge with "1", and a
red badge with "+999.

Tabs support badging with the BadgeDrawable class:

Types

There are two types of tabs: 1. Fixed tabs, 2. Scrollable tabs

Composite image: Pets with Dogs, Cats, and Birds tabs; Dog breeds with
Pitbulls, Terrier, Poodle, Labrador (partial)

Fixed tabs

Fixed tabs display all tabs on one screen, with each tab at a fixed width. The width of each tab is determined by dividing the number of tabs by the screen width. They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.

Fixed tabs example

API and source code:

The following example shows a row of fixed tabs.

Example of 3 fixed tabs.

In the layout:

Scrollable tabs

Scrollable tabs are displayed without fixed widths. They are scrollable, such that some tabs will remain off-screen until scrolled.

Scrollable tabs example

API and source code:

The following example shows a row of scrollable tabs.

Example of 4 scrollable tabs.

In the layout:

Anatomy and key properties

Tabs have a container and each tab item has an optional icon and text label. Tab items can be in an active or inactive state. The tab indicator is shown below the active tab item.

Tabs anatomy diagram

  1. Container
  2. Active icon (optional if there’s a label)
  3. Active text label (optional if there’s an icon)
  4. Active tab indicator
  5. Inactive icon (optional if there’s a label)
  6. Inactive text label (optional if there’s an icon)
  7. Tab item

Container attributes

ElementAttributeRelated method(s)Default value
Colorandroid:backgroundsetBackground
getBackground
?attr/colorSurface
Elevationandroid:elevationsetElevation0dp
HeightN/AN/A48dp (inline text) or 72dp (non-inline text and icon)
Tab modetabModesetTabMode
getTabMode
fixed

Tab item icon attributes

ElementAttributeRelated method(s)Default value
Iconandroid:iconsetIcon
getIcon
null
ColortabIconTintsetTabIconTint
setTabIconTintResource
getTabIconTint
colorOnSurface at 60% opacity and colorPrimary (activated) (see all states)

Tab item text label attributes

ElementAttributeRelated method(s)Default value
Textandroid:textsetText
getText
null
ColortabTextColorsetTabTextColors
getTabTextColors
colorOnSurface at 60% opacity and colorPrimary (activated) (see all states)
TypographytabTextAppearanceN/A?attr/textAppearanceButton
Inline labeltabInlineLabelsetInlineLabel
setInlineLabelResource
isInlineLabel
false

Tab item container attributes

ElementAttributeRelated method(s)Default value
Ripple colortabRippleColorsetTabRippleColor
setTabRippleColorResource
getTabRippleColor
colorOnSurface at 8% opacity and colorPrimary at 8% opacity (activated) (see all states)
Unbounded rippletabUnboundedRipplesetUnboundedRipple
setUnboundedRippleResource
hasUnboundedRipple
true
GravitytabGravitysetTabGravity
getTabGravity
fill
Min widthtabMinWidthN/A72dp (scrollable) or wrap_content
Max widthtabMaxWidthN/A264dp
PaddingtabPaddingStart
tabPaddingEnd
tabPaddingTop
tabPaddingBottom
tabPadding
N/A12dp
12dp
0dp
0dp
0dp

Tab indicator attributes

ElementAttributeRelated method(s)Default value
ColortabIndicatorColorsetSelectedTabIndicatorColorcolorPrimary
DrawabletabIndicatorsetSelectedTabIndicator
getSelectedTabIndicator
mtrl_tabs_default_indicator
HeighttabIndicatorHeightsetSelectedTabIndicatorHeight2dp
Full widthtabIndicatorFullWidthsetTabIndicatorFullWidth
isTabIndicatorFullWidth
true
Animation modetabIndicatorAnimationModesetTabIndicatorAnimationMode
getTabIndicatorAnimationMode
linear
GravitytabIndicatorGravitysetSelectedTabIndicatorGravity
getTabIndicatorGravity
bottom
Animation durationtabIndicatorAnimationDurationN/A250

Styles

ElementStyle
Default styleWidget.MaterialComponents.TabLayout
Primary background color styleWidget.MaterialComponents.TabLayout.Colored
Primary (light theme) or surface (dark theme)
background color style
Widget.MaterialComponents.TabLayout.PrimarySurface

Default style theme attribute: ?attr/tabStyle

See the full list of styles and attrs.

Theming tabs

Tabs support Material Theming and can be customized in terms of color and typography.

Tabs theming example

API and source code:

The following example shows a row of scrollable tabs with Material Theming.

Example of 4 scrollable tabs with light pink background. The selected text is
dark pink, the unselected text is grey.

Implementing tabs theming

Using theme attributes and styles in res/values/styles.xml (themes all tabs and affects other components):

or using default style theme attributes, styles and theme overlays (themes all tabs but does not affect other components):

or using the style in the layout (affects only these tabs):

No Android implementation guidance available

Design & API Documentation

Installation

Basic Usage

HTML Structure

Styles

JavaScript Instantiation

See Importing the JS component for more information on how to import JavaScript.

Variants

MDC Tab Bar does not have any variants; however, its subcomponents do. See the Tab Scroller, Tab, and Tab Indicator documentation for more information.

Tab Icons

We recommend using Material Icons from Google Fonts:

However, you can also use SVG, Font Awesome, or any other icon library you wish.

Style Customization

CSS Classes

CSS ClassDescription
mdc-tab-barMandatory.

Sass Mixins

To customize the width of the tab bar, use the following mixin.

MixinDescription
width($width)Customizes the width of the tab bar.
density($density-scale)Sets density scale to default tab bar variant. Use stacked-density mixin for stacked variant. Supported density scales -4, -3, -2, -1 and 0.
stacked-density($density-scale)Sets density scale to stacked tab bar variant. Supported density scales -4, -3, -2, -1 and 0.
tab-scroller-transition($duration-ms, $timing-function)Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to mdc-tab-scroller-transition mixin.

MDCTabBar Properties and Methods

PropertyValue TypeDescription
focusOnActivateboolean (write-only)Sets whether tabs focus themselves when activated. Defaults to true.
useAutomaticActivationboolean (write-only)Sets how tabs activate in response to keyboard interaction. Automatic (true) activates as soon as a tab is focused with arrow keys; manual (false) activates only when the user presses space/enter. The default is automatic (true).
Method SignatureDescription
activateTab(index: number) => voidActivates the tab at the given index.
scrollIntoView(index: number) => voidScrolls the tab at the given index into view.
Event NameEvent Data StructureDescription
MDCTabBar:activated{"detail": {"index": number}}Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCTabBarAdapter

Method SignatureDescription
scrollTo(scrollX: number) => voidScrolls the Tab Scroller to the given position.
incrementScroll(scrollXIncrement: number) => voidIncrements the Tab Scroller by the given value.
getScrollPosition() => numberReturns the scroll position of the Tab Scroller.
getScrollContentWidth() => numberReturns the width of the Tab Scroller's scroll content element.
getOffsetWidth() => numberReturns the offsetWidth of the root element.
isRTL() => booleanReturns if the text direction is RTL.
setActiveTab(index: number) => voidSets the tab at the given index to be activated.
activateTabAtIndex(index: number, clientRect: ClientRect) => voidActivates the Tab at the given index with the given clientRect.
deactivateTabAtIndex(index) => voidDeactivates the Tab at the given index.
focusTabAtIndex(index: number) => voidFocuses the Tab at the given index.
getTabIndicatorClientRectAtIndex(index: number) => ClientRectReturns the client rect of the Tab at the given index.
getTabDimensionsAtIndex(index) => MDCTabDimensionsReturns the dimensions of the Tab at the given index.
getTabListLength() => numberReturns the number of child Tab components.
getPreviousActiveTabIndex() => numberReturns the index of the previously active Tab.
getFocusedTabIndex() => numberReturns the index of the focused Tab.
getIndexOfTabById(id: string) => numberReturns the index of the given Tab ID.
notifyTabActivated(index: number) => voidEmits the MDCTabBar:activated event.

MDCTabBarFoundation

Method SignatureDescription
activateTab(index: number) => voidActivates the tab at the given index.
setUseAutomaticActivation(useAutomaticActivation: boolean) => voidSets how tabs activate in response to keyboard interaction. Automatic (true) activates as soon as a tab is focused with arrow keys; manual (false) activates only when the user presses space/enter.
handleKeyDown(evt: Event) => voidHandles the logic for the "keydown" event.
handleTabInteraction(evt: Event) => voidHandles the logic for the "MDCTab:interacted" event.
scrollIntoView(index: number) => voidScrolls the Tab at the given index into view.
No Web implementation guidance available

Using tabs

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Installing

To use Tabs in Flutter you need to import the Material package
import 'package:flutter/material.dart';

Making tabs accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Types

There are two types of tabs: 1. fixed tabs 2. scrollable tabs

scrollabe tab example

Anatomy and key properties

Tabs anatomy diagram

  1. Container
  2. Active icon (Optional if there’s a label)
  3. Active text label (Optional if there’s an icon)
  4. Active tab indicator
  5. Inactive icon (Optional if there’s a label)
  6. Inactive text label (Optional if there’s an icon)
  7. Tab item

Container attributes

 Property
ColorIn the parent widget,AppBar assign the backgroundColor property
HeightWrap your TapBar widget with a PreferredSize widget and assign preferredSize property

Active icon attributes

 Property
MaterialToolbar iconIn widget Tab assign the icon parameter
MaterialToolbar icon colorIn TabBar assign the labelColor parameter

Active text label attributes

 Property
Text labelIn widget Tab assign the text parameter.
ColorIn TabBar assign the labelColors and unselectedLabelColor parameter
TypographyIn TabBar assign the labelStyle and unselectedLabelStyle parameter

Active tab indicator attributes

 Property
IndicatorgIndicat exist be default for custom indicator go to TabBar widget and fill out the indicator attribute.
Indicator PaddingIn widget TabBar assign the indicatorPadding parameter.
Indicator SizeIn TabBar assign the indicatorSize parameter
Indicator WeightIn TabBar assign the indicatorWeight parameter

Inactive icon attributes

 Property
MaterialToolbar iconIn widget Tab assign the icon parameter
MaterialToolbar icon colorIn TabBar assign the unselectedLabelColor parameter

Inactive text label attributes

 Property
Text labelIn widget Tab assign the text parameter.
ColorIn TabBar assign the unselectedLabelColor parameter
TypographyIn TabBar assign the unselectedLabelStyle parameter

Tab item attributes

 Property
childIn widget Tab assign the child parameter. This is usually a Text widget, possibly wrapped in a Semantics widget for custom accessibility.

Fixed tabs

Fixed tabs display all tabs on one screen, with each tab at a fixed width. The width of each tab is determined by dividing the number of tabs by the screen width. They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.

Fixed tab example

Tabs

The following example shows a row of of fixed tabs.

Fixed tab example with 3 tabs, each tab has an icon

Scrollable tabs

Scrollable tabs are displayed without fixed widths. They are scrollable, such that some tabs will remain off-screen until scrolled.### Fixed tab example

Tabs

The following example shows a row of of scrollable tabs.

Scrollable tab example with 9 tabs.

Theming tabs

Tabs

The following is an example data table using the Shrine theme.

The following example shows a row of of scrollable tabs.

Scrollable tab example using Shrine theming with 9 tabs.

No Flutter implementation guidance available

Using tabs

Installing

In order to use MDCTabBarView, first add the component to your Podfile:

Then, run pod install:

After that, import the relevant target or file.

Swift

Objective-C

From there, initialize an MDCTabBarView and add it to your view controller's view.

Making tabs accessible

MDCTabBarView is accessible by default. VoiceOver reads the titles of the UITabBarItems contained within a tab bar as accessibilityLabels, and the MDCTabBarView handles setting the accessibilityTraits when tab bar items become selected and unselected.

Types

Material tabs can be broken into two main categories: 1. Fixed tabs 2. Scrollable tabs

An example of a fixed tab bar view and a scrolling tab bar view.

Tabs example

MDCTabBarView supports both fixed and scrolling tabs. By default, MDCTabbarView has a fixed layout. To set it up for scrolling, set the preferredLayoutStyle property to .scrollable. To receive updates about user actions, set the delegate property to an object conforming to MDCTabBarViewDelegate. Here is a simple set up of an MDCTabBarView:

Swift

Objective-C

Tabs anatomy

Tab bars contain tab bar items with optional icons and text labels. Tab bar items can be selected or unselected. The selection indicator appears below the currently selected tab bar item.

Tabs anatomy diagram with Recents, Favorites and Nearby text labels and icons

  1. Container
  2. Selected icon (optional if there’s a label)
  3. Selected text label (optional if there’s an icon)
  4. Selection indicator
  5. Unselected icon (optional if there’s a label)
  6. Unselected text label (optional if there’s an icon)
  7. Tab bar item

Container attributes

 AttributeRelated method(s)Default value
ColorbarTintColor-setBarTintColor:
-barTintColor
white
Layout stylepreferredLayoutStyle-setPreferredLayoutStyle:
-preferredLayoutStyle
.fixed

Tab item icon attributes

 AttributeRelated method(s)Default value
IconN/A-[UITabBarItem initWithTitle:image:tag:]
-[UITabBarItem initWithTitle:image:selectedImage:]
nil
ColorN/A-setImageTintColor:forState:
-imageTintColorForState:
nil

Tab item text label attributes

 AttributeRelated method(s)Default value
TextN/A-[UITabBarItem initWithTitle:image:tag:]
-[UITabBarItem initWithTitle:image:selectedImage:]
nil
ColorN/A-setTitleColor:forState:
-titleColorForState:
On primary color
TypographyN/A-setTitleFont:forState:
-titleFontForState:
Button

Tab item container attributes

 AttributeRelated method(s)Default value
Ripple colorrippleColor-setRippleColor:
-rippleColor
White at 16% opacity

Tab indicator attributes

 AttributeRelated method(s)Default value
ColorselectionIndicatorStrokeColor-setSelectionIndicatorStrokeColor:
-selectionIndicatorStrokeColor
On primary color

Theming

Tabs supports Material Theming using a Container Scheme. To learn more about theming extensions, see here. Below is a screenshot of an MDCTabBarView with the Material Design Shrine theme:

Shrine tab with Home, Settings, Email and Search text labels and icons

Tabs theming example

To make use of tabs theming install the tabs theming extensions with Cocoapods. First, add the following line to your Podfile:

Then Run the installer:

Next, import the Tabs theming target, and call the correct theming method.

Swift

Objective-C

Migrating from legacy tabs

Below are some of the differences between MDCTabBarView and its predecessor, MDCTabBar. If you have been using MDCTabBar, make note of the following changes.

Subclassing Restricted

Subclassing is not supported by MDCTabBarView. Any requirements that you have for Material Tabs that are not met by the public APIs should be filed as a feature request or bug against MDCTabBarView.

Selected Item Behavior

MDCTabBarView does not automatically mark any item as selected when the items array is set, unless the previously-selected item is in the new items array. This is a change from MDCTabBar, but ensures that the view and its APIs present equivalent information.

Colors, Fonts, and Theming

To set the image tint colors, use - setImageTintColor:forState:. The MDCTabBar APIs, - selectedItemTintColor and - unselectedItemTintColor are unavailable.

To set the fonts of the labels, use - setTitleFont:forState:. The MDCTabBar APIs, - selectedItemTitleFont and - unselectedItemTitleFont are unavailable. Note that the tab bar may adjust the sizes of its views to account for changes in fonts, and that can result in unexpected changes from Fixed Tabs to Scrollable Tabs depending on font choices and title length.

MDCTabBarView uses Material Ripple by default (MDCRippleView) and does not support Ink. You may configure the Ripple color for touch feedback by setting the - rippleColor property.

Alignment and Item Rendering

The MDCTabBar API itemAppearance has no equivalent on MDCTabBarView. Whatever relevant properties (e.g., title, image) are provided on UITabBarItem should be used instead.

The MDCTabBar APIs displaysUppercaseTitles and titleTextTransform have no equivalent in MDCTabBarView. Titles are rendered as set on UITabBarItem and accessibilityLabel should be set on the item if the title text is not correctly handled by UIAccessibility.

UIBarPositioningDelegate

MDCTabBarView no longer conforms to UIBarPositioning, since Material Tabs are always positioned above their related content views. As a result, MDCTabBarViewDelegate does not inherit from UIBarPositioningDelegate.

Selection Indicator Template

The Selection Indicator Template APIs and protocols are copied nearly verbatim from MDCTabBar, with the names changed to prevent collision. One difference is the expected behavior of contentFrame as used by the indicator template. In MDCTabBar the value of contentFrame was the union of the title and image frames. However, in MDCTabBarView the width of the contentFrame is always the width of the title (when present), and the height will include both the title and image. This change is necessary to support internal clients.

Custom Views

Features like badges and horizontal layout of titles and images are not supported on MDCTabBarView. Clients who need such behavior should implement their own custom UIView and assign it to the mdc_customView property of a UITabBarItem sublcass that conforms to MDCTabBarItemCustomViewing. A simple subclass conforming to the MDCTabBarItemCustomViewing protocol is provided as MDCTabBarItem.

Swift

Objective-C

No iOS implementation guidance available

Up next