How to add a FAB within BottomNavigationView ⚡️

Rahul Ray
3 min readOct 30, 2020

In this article I will show you how to make a custom bottom navigation view in your Android Projects.

So first of all lets update our build.gradle files.

Open your build.gradle(app) file and add some sruffs there.

build.gradle(app)

Add these plugins on top of your file. These are necessary for having bottom navigation view.

Now add a dependency in the same file in the dependencies block

build.gradle(app)

After adding these, now move on to build.gradle(project-level) file.

build.gradle(project)

It is must to add this classpath otherwise your dependency will not be imported.

Logically we cannot add another view (fab) inside the bottom navigation view but we can achieve this by doing a workaround.

First change your root view to Coordinator Layout then we will add a widget called BottomAppBar. Our bottom navigation view will be wrapped inside this bottomAppBar.

Then we will add a FAB which will be anchored with the bottomAppBar.

activity_main.xml

Now let’s create a menu for our navigation called bottom_nav_menu. This will be placed under the menu directory in resources.

bottom_nav_menu.xml

Here we have added five items to our menu because we want to place out FAB in the middle and to evenly space the items.

We have made the third item as a placeholder and will disable it so that it’s functionality doesn’t create any conflicts.

Right now, the bottomNavigationView is not looking nice because of overlapping background, so will set its background to null.

We cannot do that in the XML file, so we will it the MainActivity class.

MainActivity.kt

Here, we have set the background to null and disabled the functionality of 3rd item of the menu.

I am adding a working demo for the same.

Demo

Well, this looks fine. To stay tuned for my further articles on Android stuffs follow me and connect me on LinkedIn here

--

--