App bars: bottom

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

Contents

• Using bottom app bars
• Bottom app bar
• Theming

Using bottom app bars

Installing

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 relevant target or file.

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

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

Bottom app bar example

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 involving floating action button position, elevation, and visibility are animated by default, but animation can be disabled if desired.

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;

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

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.