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 ""

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

    app:navigationIcon="@drawable/ic_menu_white" />

    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.


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.



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

How to Read Metadata from AndriodManifest File

Mr Phone - Find The Next Best Phone You Want To Buy

Add Spacing to Recycler View Linear Layout Manager Using Item Decoration

Add Options Menu to Activity and Fragment

Create Assets Folder, Add Files and Read Data From It