App bars: bottom

Bottom app bars display navigation and key actions at the bottom of the screen.

Contents

• Using bottom app bars
• Installing bottom app bars
• Making bottom app bars accessible
• Bottom app bar anatomy
• Theming bottom app bars

Using bottom app bars

Bottom app bars group primary and secondary actions at the bottom of the screen, where they are easily reachable by the user's thumb.

Use the UIView subclass MDCBottomAppBarView to add a bottom app bar to your app. MDCBottomAppBarView contains a horizontally centered floating action button for primary actions and a customizable navigation bar for secondary actions. The MDCBottomAppBarView API includes properties that allow changes in elevation, position, and visibility of the embedded floating action button.

Instances of UIBarButtonItem can be added to a MDCBottomAppBarView's navigation bar. 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.

Bottom app bar example

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.

Swift

let bottomAppBar = MDCBottomAppBarView()
addSubview(bottomAppBar)
view.leftAnchor.constraint(equalTo: bottomAppBarView.leftAnchor).isActive = true
view.rightAnchor.constraint(equalTo: bottomAppBarView.rightAnchor).isActive = true
view.bottomAnchor.constraint(equalTo: bottomAppBarView.bottomAnchor).isActive = true

Objective-C

MDCBottomAppBarView *bottomAppBar = [[MDCBottomAppBarView alloc] init];
[self addSubview:bottomAppBar];
[self.view.leftAnchor constraintEqualToAnchor:bottomAppBarView.leftAnchor].active = YES;
[self.view.rightAnchor constraintEqualToAnchor:bottomAppBarView.rightAnchor].active = YES;
[self.view.bottomAnchor constraintEqualToAnchor:self.textField.bottomAnchor].active = YES;

Installing MDCBottomAppBarView

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

pod MaterialComponents/BottomAppBar

Then, run the installer.

pod install

After that, import the component target.

Swift

import MaterialComponents.MaterialBottomAppBar

Objective-C

#import "MaterialBottomAppBar.h"

From there, initialize an MDCBottomAppBarView like you would any UIView.

Making bottom app bars accessible

The following recommendations will ensure that the bottom app bar is accessible to as many users as possible:

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 ]];

Bottom app bar anatomy

A bottom app bar has a container and an optional navigation icon, anchored floating action button (FAB), action item(s) and an overflow menu.

1. Container
2. Navigation icon (optional)
3. Floating action button (FAB) (optional)
4. Action item(s) (optional)
5. Overflow menu (optional)

Container attributes

Navigation icon attributes

FAB attributes

Theming bottom app bars

MDCBottomAppBarView does not currently have a Material Design theming extension or otherwise support theming. Please indicate interest in adding theming support by commenting on issue #7172.