Bottom App Bar for Android - A Material Design Component

Similar to an App Bar (Top App Bar or Toolbar), Google introduced the Bottom App Bar as part of the Material Design Components back in 2018.

Let's get into the implementation by adding a dependency to the build.gradle file.

implementation "com.google.android.material:material:1.2.0-alpha03"

In the next step, let's add the BottomAppBar and the FloatingActionButton to the activity layout.

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    style="@style/Widget.MaterialComponents.BottomAppBar.PrimarySurface"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:hideOnScroll="true"
    app:fabAnimationMode="slide"
    app:menu="@menu/menu_main"
    app:navigationIcon="@drawable/ic_menu_white" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/createFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@+id/bottomAppBar"
    app:srcCompat="@drawable/ic_create_white" />

That's it, you can see the Bottom App Bar in the preview with the Floating Action Button hovering over the cradle.


bottom-bar-fab

There are a few tags and points to be remembered before we continue the implementation.

Never use a Bottom App Bar with one action like shown in the above case. Keep the action count between two to five similar to Bottom Navigation View.

Don't use background attribute to change the background color of the Bottom App Bar, use backgroundTint as the earlier is ineffective.

layout_anchor tag is used to anchor the Floating Action Button with the Bottom App Bar.

fabAlignmentMode has center and end attributes. By default, the value is set as the center and this value decides whether the floating action button is shown at the center or end.

fab-alignment-center

fab-alignment-end

navigationIcon - This sets the navigation icon for the Bottom App Bar. You can use any icon other than the back icon as a back icon can only be added to the Top App Bar (or Toolbar).

app:hideOnScroll hides the Bottom App Bar when the list items on the screen are scrolled.

Furthermore, the Cradle under the Bottom App Bar and the position of the Floating Action Button can be controlled using app:fabCradleMargin, app:fabCradleRoundedCornerRadius and app:fabCradleVerticalOff.

This finishes the integration of the Bottom App Bar in the application. In the next week's article, we will take a look at adding click listeners to the menu items and show a navigation drawer when the navigation menu is clicked.

Popular posts from this blog

Add Spacing to Recycler View Linear Layout Manager Using Item Decoration

Perform a Post Request Using Volley

How to Set an Android App as a Default Dialer

How to Change Material Chip Text Size, Text Style and Font