how to make bottom app bar or bottom navigation bar like google home app?

Question

I want to make a layout like above. Can anyone help me how to do that? I have tried the new material bottom app bar. but I couldn't achieve this view.

Answer 1

Finally got the solution. Just place bottomAppBar under your bottomNavigationView with transparent background. And add empty menu item to menu.xml to free space for the FAB.

XML:

<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/coordinator_view" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:fitsSystemWindows="false">    <com.google.android.material.bottomappbar.BottomAppBar     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:id="@+id/bottom_bar"     android:clickable="false"     app:fabAlignmentMode="center"     android:layout_gravity="bottom"/>  <FrameLayout     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:layout_gravity="bottom">      <com.google.android.material.bottomnavigation.BottomNavigationView         android:id="@+id/bottom_navigation"         android:layout_width="match_parent"         android:clickable="false"         android:layout_height="wrap_content"         app:menu="@menu/bottom_menu" /> </FrameLayout>  <FloatingActionButton     android:id="@+id/fab"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     app:layout_anchor="@id/bottom_bar"/> </androidx.coordinatorlayout.widget.CoordinatorLayout> 

Also you need to add an empty item in your menu.xml like this:

<item android:id="@+id/action_empty" android:title="" android:checkable="false" android:checked="false" app:showAsAction="always" android:enabled="false" >