Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Google home app

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.

like image 922
Rubayet Hassan Avatar asked Oct 15 '18 04:10

Rubayet Hassan


People also ask

How do I create a bottom navigation menu?

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.

What is the bar at the bottom of apps called?

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.

How do I add navigation to the bottom view?

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.


1 Answers

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

enter image description here

like image 99
Artur Antonyan Avatar answered Sep 21 '22 04:09

Artur Antonyan