Tabs are bars of buttons used to navigate between groups of content.
Design & API documentation
Table of contents
When a user taps a tab, the content changes to match the selected subject in the tabs.
We provide this functionality through MDCTabBar which communicates via a delegate as well as MDCTabBarViewController which provides a view containment model similar to UITabViewController.
Tabs can also show a badge (usually a number) like UITabBar.
Installation with CocoaPods
Add the following to your
Then, run the following command:
To import the component:
To use the tab bar in your code, import the MaterialTabs umbrella header (Objective-C) or MaterialComponents module (Swift).
Conform your class to the MDCTabBarDelegate protocol and set it as the tab bar’s delegate to handle updating the UI when the user selects a tab.
Update the selected tab programmatically by setting
selectedItem, optionally with an animation. Delegate methods are not called for programmatic changes, so callers are responsible for updating UI as needed after updating the selected item.
itemAppearance property on the tab bar to switch between item display modes. Items can be displayed as titles (the default), icons, or combined.
By default, the tab bar is configured to display items with white text and icons. To customize the color of the tab bar, set the
barTintColor properties. If
selectedItemTintColor is nil, the tab bar’s
tintColor will be used automatically for selected items.
Configure where items are placed in the tab bar by setting the
Custom selection indicators
The currently-selected tab is indicated visually by a selection indicator. By default this is an
underline, but you can customize its appearance by defining a selection indicator template and
selectionIndicatorTemplate property on the tab bar. Template objects are provided
contextual information about a tab’s content and return attributes that describe how that tab’s
indicator should appear. The indicator will then automatically display the provided shape and
animate changes as the user selects different tabs.
MDCTabBarIndicatorAttributes for details.
positionForBar: and return
UIBarPositionBottom to configure the tab bar as a bottom
navigation bar. The bar will automatically update with the appropriate styling.
Creating a tab bar
let tabBar = MDCTabBar(frame: view.bounds) tabBar.items = [ UITabBarItem(title: "Recents", image: UIImage(named: "phone"), tag: 0), UITabBarItem(title: "Favorites", image: UIImage(named: "heart"), tag: 0), ] tabBar.itemAppearance = .titledImages tabBar.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin] tabBar.sizeToFit() view.addSubview(tabBar)
MDCTabBar *tabBar = [[MDCTabBar alloc] initWithFrame:self.view.bounds]; tabBar.items = @[ [[UITabBarItem alloc] initWithTitle:@"Recents" image:[UIImage imageNamed:@"phone"] tag:0], [[UITabBarItem alloc] initWithTitle:@"Favorites" image:[UIImage imageNamed:@"heart"] tag:0], ]; tabBar.itemAppearance = MDCTabBarItemAppearanceTitledImages; tabBar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin; [tabBar sizeToFit]; [self.view addSubview:tabBar];
You can theme a tab bar with your app’s typography scheme using the TypographyThemer extension.
You must first add the Typography Themer extension to your project:
// Step 1: Import the TypographyThemer extension import MaterialComponents.MaterialTabs_TypographyThemer // Step 2: Create or get a typography scheme let typographyScheme = MDCTypographyScheme() // Step 3: Apply the typography scheme to your component MDCTabBarTypographyThemer.applyTypographyScheme(typographyScheme, to: component)
// Step 1: Import the TypographyThemer extension #import "MaterialTabs+TypographyThemer.h" // Step 2: Create or get a typography scheme id<MDCTypographyScheming> typographyScheme = [[MDCTypographyScheme alloc] init]; // Step 3: Apply the typography scheme to your component [MDCTabBarTypographyThemer applyTypographyScheme:colorScheme toTabBar:component];
MDCTabBar supports Material Theming using a Container Scheme.
There are two variants for Material Theming of a MDCTabBar, which are the Primary Theme
and the Surface Theme.
// Import the Tabs Theming Extensions module import MaterialComponents.MaterialTabs_MaterialTheming ... // Create or use your app's Container Scheme let containerScheme = MDCContainerScheme() // Theme the tab bar with either Primary Theme tabBar.applyPrimaryTheme(withScheme: containerScheme) // Or Surface Theme tabBar.applySurfaceTheme(withScheme: containerScheme)
// Import the Tabs Theming Extensions header #import <MaterialComponents/MaterialTabBar+MaterialTheming.h> ... // Create or use your app's Container Scheme MDCContainerScheme *containerScheme = [[MDCContainerScheme alloc] init]; // Theme the tab bar with either Primary Theme [self.tabBar applyPrimaryThemeWithScheme:containerScheme]; // Or Surface Theme [self.tabBar applySurfaceThemeWithScheme:containerScheme];
NOTE: This is currently in Beta. Features may change without warning and without a change in the Material Components for iOS version number.
MDCTabBarView is currently part of the MaterialComponentsBeta podspec. You
may need to follow the Material Components for iOS Beta integration
to configure your project to use
Typical Use of MDCTabBarView
let tabBarView = MDCTabBarView() addSubview(tabBarView) // Configure constraints
MDCTabBarView *tabBarView = [[MDCTabBarView alloc] init]; [self.view addSubview:tabBarView]; // Configure constraints
Migrating from MDCTabBar
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
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
- selectedItemTintColor and
- unselectedItemTintColor are
To set the fonts of the labels, use
- selectedItemTitleFont and
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
- rippleColor property.
Alignment and Item Rendering
itemAppearance has no equivalent on
Whatever relevant properties (e.g.,
image) are provided on
should be used instead.
titleTextTransform have no
MDCTabBarView. Titles are rendered as set on
accessibilityLabel should be set on the item if the title text is not
correctly handled by UIAccessibility.
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
Selection Indicator Template
The Selection Indicator Template APIs and protocols are copied nearly verbatim
MDCTabBar, with the names changed to prevent collision. One difference
is the expected behavior of
contentFrame as used by the indicator template.
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.
Features like badges and horizontal layout of titles and images are not
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
let customView = MyCustomTabView() let customItem = MDCTabBarItem() customItem.mdc_customView = customView let tabBarView = MDCTabBarView() tabBarView.items = [ customItem ]
MyCustomTabView *customView = [[MyCustomTabView alloc] init]; MDCTabBarItem *customItem = [[MDCTabBarItem alloc] init]; customItem.mdc_customView = customView; MDCTabBarView *tabBarView = [[MDCTabBarView alloc] init]; tabBarView.items = @[ customItem ]
NOTE: This will be updated as APIs are added and migrations are defined.