App bars: bottom

A bottom app bar displays navigation and key actions at the bottom of mobile screens.

Android check Web Not available Flutter iOS

Usage

Bottom app bars provide access to a bottom navigation drawer and up to four actions, including the floating action button.

Principles

Actionable

Bottom app bars highlight important screen actions and raise awareness of the floating action button.

Flexible

A bottom app bar's layout and actions change based on the needs of the screen.

Ergonomic

The bottom app bar is easy to reach from a handheld position on a mobile device.


When to use

Bottom app bars should be used for: Bottom app bars shouldn’t be used for:

Bottom app bars should be used for:

  • Mobile devices only
  • Access to a bottom navigation drawer
  • Screens with two to five actions

Bottom app bars shouldn't be used for:

  • Apps with a bottom navigation bar
  • Screens with one or no actions
Mobile UI bottom app bar with four actions
DoUse a bottom app bar to provide convenient access to actions.
Mobile UI bottom app bar with only the fab and no actions
Don'tDon't use a bottom app bar on screens with one or no actions (other than a FAB).

Anatomy

Bottom app bars can contain actions that apply to the context of the current screen. They include a navigation menu control on the far left and a floating action button (when one is present). If included in a bottom app bar, an overflow menu control is placed at the end of other actions.

Numbered diagram showing the elements of a bottom app bar
1. Container
2. Navigation drawer control
3. Floating action button (FAB)
4. Action icon
5. Overflow menu control

Positioning

Bottom app bars have three different layouts based on the presence of a FAB and its position in the bar. These layouts dictate the number...

Bottom app bars have three different layouts based on the presence of a FAB and its position in the bar. These layouts dictate the number of actions that can be included in the bar.

Centered FAB

A generic mobile UI with a bottom app bar that contains a centered fab.
DoUse bottom app bars on home screens that feature a navigation menu control and a prominent action (such as a FAB). A minimum of one and a maximum of two additional actions can be placed on the opposite side of the bar.

End FAB

A bottom app bar with four actions left aligned and a Fab that is right aligned.
DoUse a FAB on secondary screens that require a floating action button and three to four additional actions.

No FAB

A bottom app bar with a navigational menu left aligned and four actions aligned to the right.
DoWhen no floating action button is needed, the bottom app bar can accommodate a navigation menu icon and up to four actions aligned on the opposing edge.

Landscape

A bottom app bar being represented in landscape orientation. The navigational menu is left aligned and two actions are right aligned.
DoIn landscape orientation, actions remain aligned to screen edges for easy handheld access

Floating Action Button

When present, floating action buttons (FABs) are displayed on bottom app bars in one of two ways: Use an inset to increase the visual prominence...

When present, floating action buttons (FABs) are displayed on bottom app bars in one of two ways:

  1. Overlap: The FAB is at a higher elevation than the bottom app bar, and has no effect on the bar’s shape.
  2. Inset: The FAB is at the same elevation as the bottom app bar, and the bar shape transforms to let the FAB dock in a notch carved into the bottom app bar.

Use an inset to increase the visual prominence of a FAB or accentuate customized element shapes. Refer to the Theming section for more guidance on inset FAB's in a bottom app bar.

A generic mobile UI with a Fab overlapping the bottom app bar.
Overlapping FAB
A generic mobile UI with a Fab inserted into the bottom app bar
Inset FAB
A generic mobile UI with a Fab above the bottom app bar.
Don'tDo not place a FAB outside of a bottom app bar, as it makes it harder to reach.

Behavior

Layout

To support the intent of different sections of an app, the layout and actions of a bottom app bar can be changed to suit each...

To support the intent of different sections of an app, the layout and actions of a bottom app bar can be changed to suit each screen.

For example, screens can display more or fewer actions according to what suits the screen content best.

To showcase a primary action, this bottom app bar uses the centered FAB layout on its home screen. When viewing a message, the bottom app bar layout changes to the "End FAB" layout to accommodate additional contextual actions.

Scrolling

Upon scroll, the bottom app bar can appear and disappear.

Upon scroll, the bottom app bar can appear or disappear:

  • Scrolling downward hides the bottom app bar. If a FAB is present, it detaches from the bar and remains on screen.
  • Scrolling upward reveals the bottom app bar, and reattaches to a FAB if one is present.

A bottom app bar can contain a shape, such as a notch, along its edge to accommodate the FAB. As the bar detaches from the FAB, the bar returns to its default shape. Upon returning to the screen and reattaching to the FAB, the bar regains its notched shape.

A FAB can remain on screen, even as a bottom app bar hides when scrolled off-screen.

Elevation

The bottom app bar has an elevation of 8dp. When paired with a FAB, the FAB's resting and raised heights should be increased to remain...

The bottom app bar has an elevation of 8dp. When paired with a FAB, the FAB's resting and raised heights should be increased to remain visible above the bottom app bar.

1. Content (0dp)
2. Snackbar (6dp)
3. Bottom app bar (8dp)
4. Floating action button (12dp resting)
5. Bottom navigation drawer (16dp)

Menus that are generated by the bottom app bar (such as a bottom navigation drawer or overflow menu) open as bottom sheets at a higher elevation than the bar.

This bottom navigation drawer opens from a bottom app bar. The drawer opens in front of the bottom app bar, and displays a top app bar to close the drawer when it reaches full height.

Elements that cover the bottom app bar

The bottom app bar can be covered by keyboards and other temporary surfaces. If your app requires frequent obstruction of the bar, another component should be used instead.

Mobile email UI with a keyboard covering the bottom app bar.
DoA keyboard can temporarily cover a bottom app bar.
Mobile email UI with a fab and bottom app bar attached and above the keyboard.
Don'tDon't attach a bottom app bar to the top of the keyboard.

Placement

A bottom app bar can display a navigation menu icon to open a bottom navigation drawer, but the bar doesn’t contain any navigation actions itself...

Navigation

A bottom app bar can display a navigation menu icon to open a bottom navigation drawer, but the bar doesn't contain any navigation actions itself (such as Up navigation to a home screen or a close icon). App navigation should be placed in another component such as a top app bar, or embedded on-screen.

Mobile email UI with a Back arrow at the top left of the UI
DoProvide navigation outside of a bottom app bar that allows users to return to the previous app screen.
Mobile email UI with a Back arrow in the bottom app bar
Don'tDon't place navigation actions in a bottom app bar, as they can be covered by temporary surfaces.

Pairing with a top app bar

When used with a bottom app bar, top app bars can provide upwards navigation and additional actions. Throughout an app, actions should be organized and divided consistently across both bars.

The following items benefit from specific placement:

  • Place a single navigation menu control in a bottom app bar (for reachability)
  • Place a single overflow menu control as the trailing action
  • Place actions, like Search, in a consistent location throughout the app
  • Place destructive actions, such as "Delete," in the top app bar
Mobile email UI that has navigational menu in the top app bar on a secondary screen
DoUse a top app bar as a container for upwards navigation on secondary screens.
Mobile email homepage UI that has a navigational menu in both top and bottom app bar
Don'tOn a home screen, don't place a navigation menu control in both a top and bottom app bar. Only one app bar should have this control.
Mobile email secondary screen UI that has an overflow menu in the top app bar, right aligned
DoPlace an overflow menu as the last action between the app bars.
Mobile email secondary screen UI that is demonstrating the correct functions of top and bottom app bars
DoA bottom app bar can provide consistent access to actions, such as navigation and search, allowing the top app bar to hold contextual, screen-specific actions.

Snackbars

To avoid obstruction, snackbars and toasts should animate in place vertically above a bottom app bar. Refer to snackbars for more guidance on its layout and positioning.

DoInset a snackbar or toast above a bottom app bar and FAB.
Don'tDon't place a snackbar in front of a bottom app bar or FAB.

Theming

Posivibes Material Theme

This social media app’s bottom app bar has been customized using Material Theming. Areas of customization include color and shape. The Material Design color system...

This social media app's bottom app bar has been customized using Material Theming. Areas of customization include color and shape.

Posivibe's customized bottom app bar

Color

Posivibes' bottom app bar uses custom color on two elements: the container and icons.

Element Category Attribute Value
Container Surface Color
Opacity
#FFFFFF
100%
Icons On Surface Color
Opacity
#000000
100%

Shape

Posivibes' bottom app bar uses a custom shape on the top edge of the container.

Element Attribute Value
Container Top edge TriangleEdge SVG
Path data: "l 42 42 l 42 -42"

Specs

Mobile portrait

Bottom app bars are a mobile-only component and are not applicable for tablet or desktop use. Minimum 1, maximum of 2 actions aligned to opposite...

Bottom app bars are a mobile-only component and are not applicable for tablet or desktop use.

Minimum 1, maximum of 2 actions aligned to opposite edge of navigation menu

FAB Center

  • Measurement 56
  • Measurement 16
  • Measurement 16
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 24
  • Measurement 56
 

FAB Center cut

  • Measurement 16
  • Measurement 16
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 56
  • Measurement 24
  • Measurement 8
  • 5656
 

FAB End

Minimum 2, maximum of 4 actions aligned to opposite edge of the FAB

  • Measurement 56
  • Measurement 24
  • Measurement 16
  • Measurement 24
  • Measurement 24
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 16
  • Measurement 28
  • 5656
 

No FAB

Minimum 2, maximum of 4 actions aligned on opposite edge of navigation menu

  • Measurement 56
 

Mobile landscape

Bottom app bars are a mobile-only component and are not applicable for tablet or desktop use. Minimum 1, maximum of 2 actions aligned to opposite...

Bottom app bars are a mobile-only component and are not applicable for tablet or desktop use.

Minimum 1, maximum of 2 actions aligned to opposite edge of navigation menu

  • Measurement 48
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 24
  • Measurement 12
  • Measurement 12
  • 5656
 

Using bottom app bars

Before you can use Material bottom app bars, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Making bottom app bars accessible

Android's bottom app bar component APIs provide support for the navigation icon, action items, overflow menu and more for informing the user as to what each action performs. While optional, their use is strongly encouraged.

Content descriptions

When using icons for navigation icons, action items and other elements of bottom app bars, you should set a content description on them so that screen readers like TalkBack are able to announce their purpose or action, if any.

For an overall content description of the bottom app bar, set an android:contentDescription or use the setContentDescription method on the BottomAppBar.

For the navigation icon, this can be achieved via the app:navigationContentDescription attribute or setNavigationContentDescription method.

For action items and items within the overflow menu, the content description needs to be set in the menu:

Bottom app bar

Bottom app bars provide access to a bottom navigation drawer and up to four actions, including the floating action button.

Bottom app bar examples

API and source code:

The following example shows a bottom app bar with a navigation icon, an action icon, a cradled FAB, and an overflow menu.

Purple bottom app bar with white icons and teal inset floating action button

In the layout:

In menu/bottom_app_bar.xml:

In menu/navigation icon drawables:

In code:

Applying scrolling behavior to the bottom app bar

The following example shows the bottom app bar hiding upon scrolling the scrollable content down, and appearring upon scrolling up.

Anatomy and key properties

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

ElementAttributeRelated method(s)Default value
Colorapp:backgroundTintsetBackgroundTint
getBackgroundTint
?attr/colorSurface
Elevationapp:elevationsetElevation8dp
Heightandroid:minHeightsetMinimumHeight
getMinimumHeight
56dp (default) and 64dp (w600dp)
ElementAttributeRelated method(s)Default value
Iconapp:navigationIconsetNavigationIcon
getNavigationIcon
null
Colorapp:navigationIconTintsetNavigationIconTint?attr/colorControlNormal (as Drawable tint)

FAB attributes

ElementAttributeRelated method(s)Default value
Alignment modeapp:fabAlignmentModesetFabAlignmentMode
getFabAlignmentMode
center
Animation modeapp:fabAnimationModesetFabAnimationMode
getFabAnimationMode
scale
Cradle marginapp:fabCradleMarginsetFabCradleMargin
getFabCradleMargin
5dp
Cradle rounded corner radiusapp:fabCradleRoundedCornerRadiussetFabCradleRoundedCornerRadius
getFabCradleRoundedCornerRadius
8dp
Cradle vertical offsetapp:fabCradleVerticalOffsetsetCradleVerticalOffset
getCradleVerticalOffset
0dp

See the FAB documentation for more attributes.

Action item(s) attributes

ElementAttributeRelated method(s)Default value
Menuapp:menureplaceMenu
getMenu
null
Icon colorN/AN/A?attr/colorControlNormal (as Drawable tint)

Overflow menu attributes

ElementAttributeRelated method(s)Default value
Iconandroid:src and app:srcCompat in actionOverflowButtonStyle (in app theme)setOverflowIcon
getOverflowIcon
@drawable/abc_ic_menu_overflow_material (before API 23) or @drawable/ic_menu_moreoverflow_material (after API 23)
Themeapp:popupThemesetPopupTheme
getPopupTheme
@style/ThemeOverlay.MaterialComponents.*
Item typographytextAppearanceSmallPopupMenu and textAppearanceLargePopupMenu in app:popupTheme or app themeN/A?attr/textAppearanceSubtitle1

Styles

ElementStyle
Default styleWidget.MaterialComponents.BottomAppBar
Primary background color styleWidget.MaterialComponents.BottomAppBar.Colored
Primary (light theme) or surface (dark theme)
background color style
Widget.MaterialComponents.BottomAppBar.PrimarySurface

Default style theme attribute: bottomAppBarStyle

See the full list of styles and attrs.

Theming bottom app bars

Bottom app bars support Material Theming and can be customized in terms of color, typography and shape.

Bottom app bar theming example

API and source code:

The following example shows a bottom app bar with Material Theming.

"Pink bottom app bar with pink diamond inset FAB and brown icons"

Implementing bottom app bar theming

Using theme attributes in res/values/styles.xml (themes all bottom app bars and FABs and affects other components):

or using default style theme attributes, styles and theme overlays (themes all bottom app bars and FABs but does not affect other components):

or using the styles in the layout (affects only this bottom app bar and FAB):

In code:

Note: Using BottomAppBarCutCornersTopEdge is not necessary with rounded shapeAppearance corners.

No Android implementation guidance available
No Web implementation guidance available

Using the bottom app bar

Bottom app bars provide access to a bottom navigation drawer and up to four actions, including the floating action button.

Before you can use Material buttons, you need to import the Material Components package for Flutter:

You need to use MaterialApp.

For more information on getting started with the Material for Flutter, go to the Flutter Material library page.

For more guidance using the bottom app bar, go to the Material design page.

Bottom app bar example

BottomAppBar

Bottom app bar with with leading navigation drawer icon, overlapping FAB with '+' icon, and trailing 'search' and overflow menu control

Anatomy and key properties

Bottom app bar anatomy diagram

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

Container attributes

 Property
Colorcolor
Shapeshape
Elevationelevation

FAB attributes

See floating action button.

Icons attributes

Using an IconButton

 Property
Iconicon
Colorcolor
SizeiconSize

Theming

Theming example

The following example shows a bottom app bar with the Material Shrine Theme.

Bottom app bar with Shrine theming

No Flutter implementation guidance available

Using bottom app bars

Installing

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

Then, run the installer:

After that, import the relevant target or file.

Swift

Objective-C

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

Objective-C

Set -accessibilityHint

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

Swift

Objective-C

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

Objective-C

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

 AttributeRelated method(s)Default value
ColorbarTintColor-setBarTintColor:
-barTintColor
White
Elevationelevation-setElevation:
-elevation
8
 AttributeRelated method(s)Default value
IconleadingBarButtonItems
trailingBarButtonItems
-setLeadingBarButtonItems:
-leadingBarButtonItems
-setTrailingBarButtonItems:
-trailingBarButtonItems
nil

FAB attributes

 AttributeRelated method(s)Default value
Alignment modefloatingButtonPosition-setFloatingButtonPosition:
-floatingButtonPosition
.center
ElevationfloatingButtonElevation-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.

No iOS implementation guidance available

Up next