Skip to content

Latest commit

 

History

History

BottomAppBar

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 

App bars: bottom

Open bugs badge

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

Bottom app bar hero

Contents


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.

Bottom app bar anatomy diagram

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

Container attributes

  Attribute Related method(s) Default value
Color barTintColor -setBarTintColor:
-barTintColor
White
Elevation elevation -setElevation:
-elevation
8

Navigation icon attributes

  Attribute Related method(s) Default value
Icon leadingBarButtonItems
trailingBarButtonItems
-setLeadingBarButtonItems:
-leadingBarButtonItems
-setTrailingBarButtonItems:
-trailingBarButtonItems
nil

FAB attributes

  Attribute Related method(s) Default value
Alignment mode floatingButtonPosition -setFloatingButtonPosition:
-floatingButtonPosition
.center
Elevation floatingButtonElevation -setFloatingButtonElevation:
-floatingButtonElevation
0

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.