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.
To create a Menu Resource File , click on the app -> res -> menu(right-click) -> New -> Menu Resource File and name it bottom_nav_menu. Now the user can create as many items as he wants in the bottom_nav_menu. xml file. The user also needs to create an icon for each of these items.
As the name depicts, the navigation bar is designed and placed at the extreme bottom of the app. As per standard, it usually covers the entire horizontal space, running from left to right, at the bottom of an app screen.
Right-click on the res folder and select Android Resource Directory. Make sure to select the resource type as a menu. Now create the bottom_menu.
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" >
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With