Bottom app bars — Android Material Design

4 min readJul 31, 2020

Bottom app bars

Instead of using Top App Bars, sometimes we can also use the Bottom App Bars. In the Bottom app bar display navigation and key operations at the bottom of the mobile screens.

Usages of Bottom app bars:

Bottom app bars allows us to access the bottom navigation drawer with the actions (up to 4 actions), including the Floating Action Button.

Make the bottom app bar actionable, highlight the important actions on the screen, and boost the importance of the floating action button.

Make the bottom action bar flexible. Change the layout according to the actions taken on the bottom app bar. Like when clicked on an action, the floating action button shift to right or center.

When to use:

Bottom app bars should be used for:

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

When not to use:

Bottom app bars shouldn’t be used for:

Apps with a bottom navigation bar
Screens with one or no actions

Bottom app bar in Android:

Before going to use the Material bottom app bars, you need to add a dependency in the build.gradle (App module):

Change the Theme of the app to Material design NoAction bar.

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

File: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/container_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_app_bar"
            android:layout_gravity="bottom"
            android:backgroundTint="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:fabCradleMargin="8dp"
            app:fabAlignmentMode="end"
            app:fabAnimationMode="slide"
            app:navigationIcon="@drawable/ic_baseline_menu_24"
            app:fabCradleRoundedCornerRadius="24dp"/>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/colorAccent"
            android:src="@drawable/ic_baseline_add_24"
            app:layout_anchor="@id/bottom_app_bar" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

File: menu/bottom_app_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/app_bar_search"
        android:icon="@drawable/ic_baseline_search_24"
        app:showAsAction="always"
        android:title="Search"
        app:actionViewClass="android.widget.SearchView" />
    <item
        android:title="User"
        android:id="@+id/app_bar_user"/>
    <item
        android:title="Contact"
        android:id="@+id/app_bar_contact"/>
</menu>

in java file:

inflate the menu XML layout in the onCreateOptionsMenu() method. The inflate taking the XML file and parsing it to the create view.

Initialize the bottom app bar inside the onCreate() method and set the NavigationOnClickListener on the bottom app bar. Set the Floating action button in the center. When the user clicks on an action, the floating action bar slides to the Right end of the bar.

For the java code of the above Bottom App Bar Click Here

Key properties

The bottom app bar has a container and an optional navigation icon, an anchored floating action button (FAB), action item(s), and an overflow menu.

Container
Navigation icon (optional)
Floating action button (FAB) (optional)
Action item(s) (optional)
Overflow menu (optional)

How to position the bottom app bars

It has three layouts based on the FAB and the actions that include in the bottom app bars.

Centered FAB

End FAB

No FAB

Landscape

Floating Action Button

Floating action buttons (FABs) are displayed on bottom app bars in one of two ways:

Overlap: The FAB is at a higher elevation than the bottom app bar, and has no effect on the bar’s shape.

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.