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.

My problem is that since I can fill the BottomAppBar only with a menu resource, I can't understand how to align my buttons to look like a BottomNavigationView (but with the "cut" for the Fab button) instead of align everything to one side of the BottomAppBar.

How can I add a custom layout inside this new Material BottomAppBar?

Or instead, is there any way to implement a BottomNavigationView with the "cut" for for the Fab button (keeping cool default animations like the new BottomAppBar)?

I'm redesigning an old app, so far i have a working BottomAppBar with the fab button and some buttons of the menu (from the old version of the app). Switching from the previous AppBar to the new one was really easy, but now I'm stuck trying to change the layout inside it — Berenluth, Dec 08 '18 at 12:03
Basically you want your bottom app bar to look like Google home app? — Mayur Gajra, Dec 08 '18 at 13:12
Exactly. At first i thought about making a custom BottomNavigationView that interact with the fab button, but i guess it's much easier to inflate a custom layout inside a BottomAppBar since it already handle different behaviours and animations — Berenluth, Dec 08 '18 at 13:44

score 18 · Accepted Answer · edited Apr 07 '20 at 11:57

SOLVED

Basically, instead of trying to force the menu resources to the layout that i needed, i used this solution instead, i just put a LinearLayout inside the BottomAppBar using the "empty" element as @dglozano suggested.

Using ?attr/selectableItemBackgroundBorderless i'm also able to achieve an effect that is really similar to the BottomNavigationView.

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:gravity="center"
    app:layout_anchorGravity="start"
    app:hideOnScroll="true"
    app:fabAnimationMode="scale"
    app:fabAlignmentMode="center"
    app:contentInsetEnd="16dp"
    app:contentInsetStart="16dp"
    app:backgroundTint="@color/colorPrimary">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="5">
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_home_white_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:tint="@color/secondary_text"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_map_black_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_people_white_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_account_circle_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
    </LinearLayout>
</com.google.android.material.bottomappbar.BottomAppBar>

Why the use of "paddingEnd" set to 16dp? (inside the LinearLayout) — Richard Miller, Jan 29 '20 at 09:08
Honestly, I don't remember preceisely, but i think it's because when you manually insert a layout inside the AppBar, the layout is placed at 8dp from the start, and by setting width="match_parent" the layout was 8dp outside the view. By setting paddingEnd="8dp" the layout is aligned with the end of the view, and by setting it to 16dp it actually makes it symmetric with the other side. — Berenluth, Jan 30 '20 at 11:46
@Hatzil By default Bottom App Bar has set some padding `contentInsetStart` so either you can set it to zero or set similar value for `contentInsetEnd` as well — Vikas Patidar, Apr 07 '20 at 11:54

score 7 · Answer 2 · edited Feb 08 '19 at 10:36

Place bottomAppBar under your bottomNavigationView with transparent background. And add empty menu item to menu.xml to free space for the FAB.

XML:

<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/lt_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="false">


<ViewPager
    android:id="@+id/main_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="56dp"
    android:layout_above="@+id/bottom_navigation"
    android:layout_alignParentStart="true" />


<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:labelVisibilityMode="labeled"
    android:layout_gravity="bottom"
    android:layout_alignParentBottom="true"
    android:background="@color/transparent"
    app:menu="@menu/bottom_menu" />

<com.google.android.material.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_bar"
    android:layout_gravity="bottom"/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/bottom_bar"/>

Result

score 4 · Answer 3 · answered Sep 20 '19 at 17:43

The team that implement the material components for android says that this design is not part of the specification, but they generously offer a simple solution that can be seen in the link below.

Is it possible to have the BottomAppBar & FloatingActionButton with menu evenly distributed? #72

Basically, one need to change the layout params of the container of the menu buttons:

if(bottomAppBar.childCount > 0) {
     val actionMenuView = bottomAppBar.getChildAt(0) as androidx.appcompat.widget.ActionMenuView
     actionMenuView.layoutParams.width = androidx.appcompat.widget.ActionMenuView.LayoutParams.MATCH_PARENT   
}

The combination of this with your void menu item will do the trick, avoiding the use of another android component.

dglozano · Answer 4 · 2018-12-08T18:17:01.600

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.

<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:navigationIcon="@drawable/baseline_menu_white_24"/>

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.

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />

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.

Thanks for replying, unfortunately i already followed the same medium post and i already have a working BottomAppBar. My problem is that in this way if i put more menu buttons, they're alligned to the end or to start, but what i need is a BottomNavigationView style, with buttons equally distributed on the lenght of the bar (avoiding overlap with fab button) — Berenluth, Dec 08 '18 at 14:21
as i expected it didn't work, the idea of adding an empty element is not bad, but they're still alligned to the end (and even if i allign them in the center it doesn't look good on different display dimensions. Here's the result i.stack.imgur.com/m1kAS.jpg — Berenluth, Dec 08 '18 at 16:37
@Berenluth can you upload your XML layout file ? I think disabling the sifthing mode would do the trick — dglozano, Dec 08 '18 at 16:42

score 2 · Answer 5 · answered Jan 08 '20 at 08:07

This might help someone to achieve the above design. Add empty menu item to adjust the fab button and space.

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


     <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_bar"
            style="@style/AppTheme.BottomAppBar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:layout_gravity="bottom"
            android:backgroundTint="@color/bottom_bar">

        <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                app:itemIconTint="@color/white"
                app:labelVisibilityMode="unlabeled"
                app:menu="@menu/bottom_menu">

        </com.google.android.material.bottomnavigation.BottomNavigationView>
    </com.google.android.material.bottomappbar.BottomAppBar>


    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/bottom_bar"
            android:src="@drawable/ic_plus"
            android:visibility="visible"
            app:borderWidth="0dp"
            app:fabAlignmentMode="end"
            app:fabCradleMargin="20dp"
            app:fabSize="normal"
            app:layout_anchor="@id/bottom_bar"
            app:maxImageSize="38dp"
            app:tint="@color/white">

    </com.google.android.material.floatingactionbutton.FloatingActionButton>

score 1 · Answer 6 · edited Sep 28 '20 at 13:18

This should work for you

Result

 <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/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="?attr/actionBarSize">
    
        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_bar"
            style="@style/Widget.MaterialComponents.BottomAppBar"
            android:layout_width="match_parent"
            android:layout_gravity="bottom"
            android:layout_height="wrap_content" >
    
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:id="@+id/nav_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_horizontal"
                    android:layout_margin="0dp"
                    android:background="@drawable/transparent"
                    android:padding="0dp"
                    app:menu="@menu/bottom_nav_menu" />
            </FrameLayout>
    
    
        </com.google.android.material.bottomappbar.BottomAppBar>
    
        <com.google.android.material.floatingactionbutton.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>

How to implement new material BottomAppBar as BottomNavigationView

6 Answers6

Linked