# Bottom App Bars One of the defining features of Material Design is the design of the `BottomAppBar`. Based on the changing needs and behaviors of users, the `BottomAppBar` is an evolution from standard Material guidance. It puts more focus on features, increases engagement, and visually anchors the UI. ## Design & API Documentation - [Material Design guidelines: Bottom App Bar](https://material.io/go/design-app-bar-bottom) - [Class definition](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomappbar/BottomAppBar.java) - [Class overview](https://developer.android.com/reference/com/google/android/material/bottomappbar/BottomAppBar) ## Usage Here's an example of how to include the widget in your layout: ```xml ``` The `FloatingActionButton` can be anchored to the `BottomAppBar` by setting `app:layout_anchor` or by calling `CoordinatorLayout.LayoutParams#setAnchorId(int)`. ### Material Styles Using `BottomAppBar` with an updated Material theme (`Theme.MaterialComponents`) will provide the correct updated Material styles by default. If your application theme does not inherit from an updated Material theme, you can apply the `BottomAppBar` Material style directly to your widget in XML. ```xml style="@style/Widget.MaterialComponents.BottomAppBar" ``` ### Bottom App Bar Attributes Feature | Relevant attributes :----------------------- | :--------------------------------- Background Tint | `app:backgroundTint` FAB Alignment Mode | `app:fabAlignmentMode` FAB Cradle Margin | `app:fabCradleMargin` FAB Cradle Corner Radius | `app:fabCradleRoundedCornerRadius` FAB Vertical Offset | `app:fabCradleVerticalOffset` Hide on scroll | `app:hideOnScroll` #### Background Tint The `BottomAppBar` internally handles its own background. This allows it to automatically cradle the `FloatingActionButton` when it is attached, but it also means that you shouldn't call `setBackground()` or use the `android:background` attribute in xml. Instead, the `app:backgroundTint` attribute will allow you to set a tint. #### `FloatingActionButton` Alignment Modes The `FloatingActionButton` can be aligned either to the center (`FAB_ALIGNMENT_MODE_CENTER`) or to the end (`FAB_ALIGNMENT_MODE_END`) by calling `setFabAlignmentMode(int)`. The default animation will automatically be run. This can be coordinated with a `Fragment` transition to allow for a smooth animation from a primary screen to a secondary screen. #### `FloatingActionButton` Attributes The placement of the `FloatingActionButton` can be controlled by `fabAlignmentMode`, `fabCradleMargin`, `fabCradleRoundedCornerRadius`, and `fabCradleVerticalOffset`. The starting alignment mode (`fabAlignmentMode`) can be set to either `center` or `end`. Changing the `fabCradleMargin` will increase or decrease the distance between the `FloatingActionButton` and the `BottomAppBar`. The `fabCradleRoundedCornerRadius` specifies the roundness of the corner around the cutout. The `fabCradleVerticalOffset` specifies the vertical offset between the `FloatingActionButton` and the `BottomAppBar`. If `fabCradleVerticalOffset` is 0, the center of the `FloatingActionButton` will be aligned with the top of the `BottomAppBar`. #### Hide on scroll The `BottomAppBar` can be set to hide on scroll with the `hideOnScroll` attribute. To enable this behavior, you should ensure that the scrolling content is in a `NestedScrollView`. There's no need to wrap the `BottomAppBar` in an `AppBarLayout` or use any of the scroll flags associated with `AppBarLayout` such as `app:layout_scrollFlags`. ### Handling Menu Options There are two ways to handle menu options. The first way is to directly call `setOnMenuItemClickListener(OnMenuItemClickListener)` and to handle the menu options in the callback: ```java BottomAppBar bar = (BottomAppBar) findViewById(R.id.bar); bar.setOnMenuItemClickListener(new OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { // Handle actions based on the menu item return true; } }); ``` The other way is to call `setSupportActionBar()` on the `BottomAppBar`. This will set up the menu callbacks in a similar way to Toolbar which hooks into `Activity#onCreateOptionsMenu()` and `Activity#onOptionsItemSelected()`. This makes it easier to transition from a `Toolbar` which was set as the action bar to a `BottomAppBar`. This will also allow you to handle the navigation item click by checking if the menu item id is `android.R.id.home`. ```java BottomAppBar bar = (BottomAppBar) findViewById(R.id.bar); setSupportActionBar(bar); ``` ### Handling Navigation Item Click If you use `setSupportActionBar()` to set up the `BottomAppBar` you can handle the navigation menu click by checking if the menu item id is `android.R.id.home`. The other option is to call `setNavigationOnClickListener(OnClickListener)`: ```java BottomAppBar bar = (BottomAppBar) findViewById(R.id.bar); bar.setNavigationOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // Handle the navigation click by showing a BottomDrawer etc. } }); ```