# Bottom app bars
A [bottom app bar](https://material.io/components/app-bars-bottom/) displays
navigation and key actions at the bottom of mobile screens.
## Contents
* [Using bottom app bars](#using-bottom-app-bars)
* [Bottom app bar](#bottom-app-bar)
* [Theming bottom app bars](#theming-bottom-app-bars)
## 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](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md)
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:
```xml
```
## 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:
* `CoordinatorLayout`
* [Class definition](https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout)
* `BottomAppBar`
* [Class definition](https://developer.android.com/reference/com/google/android/material/bottomappbar/BottomAppBar)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomappbar/BottomAppBar.java)
* `FloatingActionButton`
* [Class definition](https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingactionbutton/FloatingActionButton.java)
The following example shows a bottom app bar with a navigation icon, an action
icon, a cradled FAB, and an overflow menu.
In the layout:
```xml
```
In `menu/bottom_app_bar.xml`:
```xml
```
In menu/navigation icon drawables:
```xml
...
```
In code:
```kt
bottomAppBar.setNavigationOnClickListener {
// Handle navigation icon press
}
bottomAppBar.setOnMenuItemClickListener { menuItem ->
when (menuItem.itemId) {
R.id.search -> {
// Handle search icon press
true
}
R.id.more -> {
// Handle more item (inside overflow menu) press
true
}
else -> false
}
}
```
#### 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.
```xml
...
...
```
## 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.
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** | `app:backgroundTint` | `setBackgroundTint`
`getBackgroundTint` | `?attr/colorSurface`
**Elevation** | `app:elevation` | `setElevation` | `8dp`
**Height** | `android:minHeight` | `setMinimumHeight`
`getMinimumHeight` | `56dp` (default) and `64dp` (w600dp)
### Navigation icon attributes
| Attribute | Related method(s) | Default value
--------- | -------------------- | ------------------------------------------ | -------------
**Icon** | `app:navigationIcon` | `setNavigationIcon`
`getNavigationIcon` | `null`
**Color** | N/A | N/A | `?attr/colorControlNormal` (as `Drawable` tint)
### FAB attributes
| Attribute | Related method(s) | Default value
-------------------------------- | ---------------------------------- | ---------------------------------------------------------------------- | -------------
**Alignment mode** | `app:fabAlignmentMode` | `setFabAlignmentMode`
`getFabAlignmentMode` | `center`
**Animation mode** | `app:fabAnimationMode` | `setFabAnimationMode`
`getFabAnimationMode` | `scale`
**Cradle margin** | `app:fabCradleMargin` | `setFabCradleMargin`
`getFabCradleMargin` | `5dp`
**Cradle rounded corner radius** | `app:fabCradleRoundedCornerRadius` | `setFabCradleRoundedCornerRadius`
`getFabCradleRoundedCornerRadius` | `8dp`
**Cradle vertical offset** | `app:fabCradleVerticalOffset` | `setCradleVerticalOffset`
`getCradleVerticalOffset` | `0dp`
See the
[FAB documentation](https://github.com/material-components/material-components-android/tree/master/docs/components/FloatingActionButton.md)
for more attributes.
#### Action item(s) attributes
| Attribute | Related method(s) | Default value
-------------- | ---------- | -------------------------- | -------------
**Menu** | `app:menu` | `replaceMenu`
`getMenu` | `null`
**Icon color** | N/A | N/A | `?attr/colorControlNormal` (as `Drawable` tint)
### Overflow menu attributes
| Attribute | Related method(s) | Default value
------------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------- | -------------
**Icon** | `android: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)
**Theme** | `app:popupTheme` | `setPopupTheme`
`getPopupTheme` | `@style/ThemeOverlay.MaterialComponents.*`
**Item typography** | `textAppearanceSmallPopupMenu` and `textAppearanceLargePopupMenu` in `app:popupTheme` or app theme | N/A | `?attr/textAppearanceSubtitle1`
### Styles
| Style
-------------------------------------------------------------------------------- | -----
**Default style** | `Widget.MaterialComponents.BottomAppBar`
**Primary background color style** | `Widget.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](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomappbar/res/values/styles.xml)
and
[attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomappbar/res/values/attrs.xml).
## Theming bottom app bars
Bottom app bars support
[Material Theming](https://material.io/components/app-bars-bottom#theming) and
can be customized in terms of color, typography and shape.
### Bottom app bar theming example
API and source code:
* `CoordinatorLayout`
* [Class definition](https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout)
* `BottomAppBar`
* [Class definition](https://developer.android.com/reference/com/google/android/material/bottomappbar/BottomAppBar)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomappbar/BottomAppBar.java)
* `FloatingActionButton`
* [Class definition](https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingactionbutton/FloatingActionButton.java)
* `BottomAppBarCutCornersTopEdge`:
* [Class source](https://github.com/material-components/material-components-android/tree/master/catalog/java/io/material/catalog/bottomappbar/BottomAppBarCutCornersTopEdge.java)
The following example shows a bottom app bar with Material Theming.
#### Implementing bottom app bar theming
Using theme attributes in `res/values/styles.xml` (themes all bottom app bars
and FABs and affects other components):
```xml
```
or using default style theme attributes, styles and theme overlays (themes all
bottom app bars and FABs but does not affect other components):
```xml
```
or using the styles in the layout (affects only this bottom app bar and FAB):
```xml
```
In code:
```kt
val topEdge = BottomAppBarCutCornersTopEdge(
bottomAppBar.fabCradleMargin,
bottomAppBar.fabCradleRoundedCornerRadius,
bottomAppBar.cradleVerticalOffset
)
val background = bottomAppBar.background as MaterialShapeDrawable
background.shapeAppearanceModel = background.shapeAppearanceModel.toBuilder().setTopEdge(topEdge).build()
```
_**Note:** Using `BottomAppBarCutCornersTopEdge` is not necessary with rounded
shapeAppearance corners._