material-components_material-components-android/docs/components/BottomAppBar.md

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
• Class definition

Usage

Here's an example of how to include the widget in your layout:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- Other components and views -->

  <android.support.design.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      app:navigationIcon="@drawable/ic_menu_24"/>

  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_anchor="@id/bar"/>

</android.support.design.widget.CoordinatorLayout>

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.

style="@style/Widget.MaterialComponents.BottomAppBar"

Bottom App Bar Attributes

Feature	Relevant attributes
Background Tint	app:backgroundTint
FAB Alignment Mode	app:fabAlignmentMode
FAB Attached	app:fabAttached
FAB Cradle Diameter	app:fabCradleDiameter
FAB Cradle Corner Radius	app:fabCradleRoundedCornerRadius
FAB Vertical Offset	app:fabCradleVerticalOffset

Background Tint

The BottomAppBar internally handles its own background. This allows it to automatically cradle the FAB 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.

Fab Attributes

The placement of the FAB can be controlled by fabAlignmentMode, fabAttached, fabCradleDiameter, fabCradleRoundedCornerRadius, and fabCradleVerticalOffset. The starting alignment mode (fabAlignmentMode) can be set to either center or end. If fabAttached is set to true, the fab will be laid out attached to the BottomAppBar. The fabCradleDiameter is the diameter of the cradle, changing this value will increase or decrease the apparent distance between the FAB and the BottomAppBar. fabCradleRoundedCornerRadius specifies the roundness of the corner around the cutout. fabCradleVerticalOffset specifies the vertical offset between the FAB and the BottomAppBar. If fabCradleVerticalOffset is 0, the center of the FAB will be aligned with the top of the BottomAppBar.

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:

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.

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):

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.
    }
});

FAB Attached States

The FAB can either be attached or detached by calling setFabAttached(boolean). When attached, the FAB will be cradled in the BottomAppBar. When detached, the FAB will float above it.

FAB Alignment Modes

The FAB can be aligned either to the center (FAB_ALIGNMENT_MODE_CENTER) as the primary action or to the end (FAB_ALIGNMENT_MODE_END) as a secondary action 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.