How to implement new material BottomAppBar as BottomNavigationView

Question

I was trying to implement the new BottomAppBar that usually looks like this: material BottomAppBar as a BottomNavigationView like in the Google home app that looks like this

Answer 1

1 - Include Maven in your repository in build.gradle

allprojects {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

2 - Place material components dependency in your build.gradle. Keep in mind that material version is regularly updating.

implementation 'com.google.android.material:material:1.0.0-alpha1'

3 - Set compileSdkVersion, and targetSdkVersion to the latest API version targetting Android P which is 28.

4 - Make sure your app inherits Theme.MaterialComponents theme in order to make BottomAppBar use the latest style. Alternatively you can declare the style for BottomAppBar in widget declaration within layout xml file as follows.

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

5 - You can include BottomAppBar in your layout as follows. BottomAppBar must be a child of CoordinatorLayout.

6 - You can anchor a Floating Action Button (FAB) to BottomAppBar by specifying the id of the BottomAppBar in app:layout_anchor attribute of the FAB. BottomAppBar can cradle FAB with a shaped background or FAB can overlap BottomAppBar.

7 - There are many attributes you can use to configure the Bottom Nav Bar and the Fab Icon.

8 - Check this medium post for a more complete explanation.

---

UPDATE: Check the OP answer for the final solution for his particular problem.