Material Design App Bar Bottom

App bars: bottom

A bottom app bar displays navigation and key actions at the bottom of the screen. Bottom app bars work like navigation bars, but with the additional option to show a floating action button.

A screenshot of a bottom app bar.

Design & API documentation

Material Design guidelines: App bars: bottom
Class: MDCBottomAppBarView
Enumeration: Enumerations
Enumeration: MDCBottomAppBarFloatingButtonElevation
Enumeration: MDCBottomAppBarFloatingButtonPosition

Overview
Installation
- Installation with CocoaPods
- Importing
Usage
- Typical use
Extensions
- Color Theming
Accessibility
- Set -accessibilityLabel
- Set -accessibilityHint

Overview

Bottom app bars follow a recommended Material Design interaction design pattern for providing primary and secondary actions that are easily accessible. With a bottom app bar users are more easily able to use single-handed touch interaction with an application since actions are displayed close to the bottom of the screen within easy reach of a user's thumb.

The bottom app bar includes a floating action button that is intended to provide users with a primary action. Secondary actions are available on a navigation bar that can be customized with several buttons on the left and right sides of the navigation bar. The primary action floating action button is centered on the bottom app bar by default.

MDCBottomAppBarView should be attached to the bottom of the screen or used in conjunction with an expandable bottom drawer. The MDCBottomAppBarView API includes properties that allow changes to the elevation, position and visibility of the embedded floating action button.

UIBarButtonItems can be added to the navigation bar of the MDCBottomAppBarView. Leading and trailing navigation items will be shown and hidden based on the position of the floating action button.

Transitions between floating action button position, elevation and visibility states are animated by default, but can be disabled if desired.

Installation

Installation with CocoaPods

Add the following to your Podfile:

            pod 'MaterialComponents/BottomAppBar'

Then, run the following command:

            pod install

Importing

To import the component:

Swift

              import MaterialComponents.MaterialBottomAppBar

Objective-C

              #import "MaterialBottomAppBar.h"

Usage

Typical use

MDCBottomAppBarView can be added to a view hierarchy like any UIView. Material Design guidelines recommend always placing the bottom app bar at the bottom of the screen.

Extensions

Color Theming

Note: At present, Bottom App Bar only has a "Surface Variant" color themer for the Material Design color system.

Task: Implement a primary variant color themer

You can theme a Bottom App Bar with your app's color scheme using the ColorThemer extension.

You must first add the ColorThemer extension to your project:

            pod 'MaterialComponents/BottomAppBar+ColorThemer'

Swift

              // Step 1: Import the ColorThemer extension and Buttons Themers import MaterialComponents.MaterialBottomAppBar_ColorThemer import MaterialComponents.MaterialButtons_ButtonThemer  // Step 2: Create or get a color scheme and typography scheme let colorScheme = MDCSemanticColorScheme() let typgoraphyScheme = MDCTypographyScheme() let buttonScheme = MDCButtonScheme() buttonScheme.colorScheme = colorScheme buttonScheme.typographyScheme = typographyScheme  // Step 3: Apply the button scheme to the Bottom App Bar's floating button and // the color scheme to your Bottom App Bar MDCFloatingActionButtonThemer.applyScheme(buttonScheme, to: bottomBarView.floatingButton) MDCBottomAppBarColorThemer.applySurfaceVariant(withSemanticColorScheme: colorScheme,                                                to: bottomBarView)

Objective-C

              // Step 1: Import the ColorThemer extension and Buttons Themers #import "MaterialBottomAppBar+ColorThemer.h" #import "MaterialButtons+ButtonThemer.h"  // Step 2: Create or get a color scheme and typography scheme id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804]; id<MDCTypographyScheming> typographyScheme = [[MDCTypographyScheme alloc] init]; MDCButtonScheme *buttonScheme = [[MDCButtonScheme alloc] init]; buttonScheme.colorScheme = colorScheme; buttonScheme.typographyScheme = typographyScheme;  // Step 3: Apply the button scheme to the Bottom App Bar's floating button and // the color scheme to your Bottom App Bar [MDCFloatingActionButtonThemer applyScheme:buttonScheme                                   toButton:self.bottomBarView.floatingButton]; [MDCBottomAppBarColorThemer applySurfaceVariantWithSemanticColorScheme:colorScheme                                                     toBottomAppBarView:bottomAppBarView];

Accessibility

To help ensure your bottom app bar is accessible to as many users as possible, please be sure to review the following recommendations:

Set `-accessibilityLabel`

Set an appropriate accessibilityLabel to all buttons within the bottom app bar.

Swift

              bottomAppBar.floatingButton.accessibilityLabel = "Compose" let trailingButton = UIBarButtonItem() trailingButton.accessibilityLabel = "Buy" bottomAppBar.trailingBarButtonItems = [ trailingButton ]

Objective-C

              bottomAppBar.floatingButton.accessibilityLabel = @"Compose"; UIBarButtonItem *trailingButton =      [[UIBarButtonItem alloc] initWithTitle:nil                                      style:UIBarButtonItemStylePlain                                     target:self                                     action:@selector(didTapTrailing:)]; trailingButton.accessibilityLabel = @"Buy"; [bottomAppBar setTrailingBarButtonItems:@[ trailingButton ]];

Set `-accessibilityHint`

Set an appropriate accessibilityHint to all buttons within the bottom app bar.

Swift

              bottomAppBar.floatingButton.accessibilityHint = "Create new email" let trailingButton = UIBarButtonItem() trailingButton.accessibilityHint = "Purchase the item" bottomAppBar.trailingBarButtonItems = [ trailingButton ]

Objective-C

              bottomAppBar.floatingButton.accessibilityHint = @"Create new email"; UIBarButtonItem *trailingButton =      [[UIBarButtonItem alloc] initWithTitle:nil                                      style:UIBarButtonItemStylePlain                                     target:self                                     action:@selector(didTapTrailing:)]; trailingButton.accessibilityHint = @"Purchase the item"; [bottomAppBar setTrailingBarButtonItems:@[ trailingButton ]];