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.

Please do post some code examples of what you have done so far. The xml will be fine. — Rajarshi, Oct 15 '18 at 05:04

score 20 · Answer 1 · edited Dec 21 '19 at 10:03

20

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

edited Dec 21 '19 at 10:03

Mehul Solanki

1,147
11
15

answered Feb 07 '19 at 16:47

Artur Antonyan

578
6
11

I'm having an issue with the FAB, where the bottom half of it isn't clickable. I'm assuming the blank menu item of the BottomNavView is blocking it, but even setting it to checkable:false and enabled:false won't allow the entire FAB to respond to click events. That or the ViewPager isn't tall enough to reach the bottom half of the FAB – Bryan W Apr 21 '19 at 23:20
thanks, that works perfectly - I actually came across your solution on another question by coincidence earlier – Bryan W Apr 22 '19 at 19:09
@ArturAntonyan I tried your way but didnt get proper result. Here its output.http://i65.tinypic.com/4rrthw.png – Sagar Maiyad May 08 '19 at 06:25
@ArturAntonyan can you please help me with that. – Sagar Maiyad May 08 '19 at 06:25
@Riser what version of com.google.android.material dependency do you use? – Artur Antonyan May 08 '19 at 11:48
@ArturAntonyan 1.1.0-alpha06 – Sagar Maiyad May 08 '19 at 11:58
@ArturAntonyan mean while i done with other solution. – Sagar Maiyad May 08 '19 at 11:59
Hi, I couldn't archieve the same solution, what version are you using? I got the same result as @Riser – Dimas Mendes May 28 '19 at 22:08
@DimasMendes i use 1.1.0-alpha03. I'll try to update dependency and provide a new solution to this problem in several days. – Artur Antonyan May 29 '19 at 09:08
@ArturAntonyan I updated it to 1.1.0-alpha06 and it worked! Also, my bg had the same color as the gap xd – Dimas Mendes May 29 '19 at 15:56
@DimasMendes Should i give solution or it works now for you? – Sagar Maiyad May 30 '19 at 08:38
2

Height of BottomNavigation and BottomAppbar doesn't match. How to match them? Also shadow is not showing. – hkchakladar Oct 13 '19 at 18:10
should we listen to the clicks on bottomAppBar or the Navigationview?? – confusedstudent Dec 16 '21 at 16:37

Re'em · Accepted Answer · 2019-10-18T12:46:19.430

@Artur's solution is a huge kick in the right direction, although it needs more fine tuning as google's material components has evolved.

my solution's screenshot:

build.gradle's dependencies:

implementation 'com.google.android.material:material:1.1.0-alpha10'
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'

layout/activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.main.MainActivity"
        android:background="@color/orange_500"
        >

        <!-- blah blah blah other content...   -->
        <!--         android:visibility="gone" -->

        <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:id="@+id/coordinator_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="false"
                android:clickable="false"
                android:focusable="false"
                >


                <com.google.android.material.bottomappbar.BottomAppBar
                        android:id="@+id/bottom_bar"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom"
                        android:background="@android:color/transparent"
                        android:clickable="false"
                        app:fabAlignmentMode="center"
                        app:contentInsetStart="0dp"
                        app:contentInsetStartWithNavigation="0dp"
                        >

                        <com.google.android.material.bottomnavigation.BottomNavigationView
                                android:background="@color/clear"
                                android:id="@+id/bottom_navigation"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                app:menu="@menu/menu_bottom_navigation_main"
                                android:outlineAmbientShadowColor="@android:color/transparent"
                                android:outlineSpotShadowColor="@android:color/transparent"
                                />

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

                <com.google.android.material.floatingactionbutton.FloatingActionButton
                        android:id="@+id/fab"
                        style="@style/Widget.Design.FloatingActionButton"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_anchor="@id/bottom_bar"
                        android:src="@drawable/ic_add_white_24dp"
                        android:tint="@color/white"
                        />
        </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

menu/menu_bottom_navigation_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
            android:id="@+id/action_view_all_expenses"
            android:enabled="true"
            android:icon="@drawable/ic_list_black_24dp"
            android:title="View All"
            app:showAsAction="always" />


    <item
    android:enabled="false"
    android:title="Add Expense"
    app:showAsAction="always"
            android:checkable="false"
            android:checked="false"
            />


    <item

            android:id="@+id/action_view_dashboard"
            android:enabled="true"
            android:icon="@drawable/ic_dashboard_black_24dp"
            android:title="Dashboard"
            app:showAsAction="withText" />
</menu>

A few remarks:

I had to remove the FrameLayout as the middle-man, it didn't go well.
My main root is a ConstraintLayout. I only needed to add a coordinator layout for the bottom to behave well. notice that the coordinator's height is match_parent although it is only needed for the bottom app bar.
the bottom navigation view had to add android:outlineAmbientShadowColor and android:outlineSpotShadowColor as transparent and also transparent background, or devices running android q will have strange shadows painted on top of the bottom app bar.
the bottom app bar had to add app:contentInsetStart and app:contentInsetStartWithNavigation to be 0dp so that the navigation view won't get moved aside from the screen's start and look strange.
if you will use ConstraintLyaout as the root view, you can't constraint to the bottom navigation view. instaed you will need to constraint's bottom to bottom of parent, and add margin bottom like this: android:layout_marginBottom="@dimen/design_bottom_navigation_height"

I want to add some space between fab and bottom nav. fabCradleRoundedCornerRadius does not work for bottom app bar. — HyeonSeok, Apr 09 '20 at 10:59

score 3 · Answer 3 · answered Oct 15 '18 at 09:34

3

You also can use android.support.design.widget.TabLayout aligned at the bottom of the screen with four normal tabs with icons and one special tab in the middle of the other tabs with a customized view.

answered Oct 15 '18 at 09:34

Norbert

1,204
1
9
13

FedeFonto · Answer 4 · 2019-05-09T15:27:30.217

You can find another solution here. @barenluth suggest to put a linear layout inside the bottom app bar and use it like navigation view:

<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:backgroundTint="@color/colorPrimary">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="5"
        android:paddingEnd="16dp">
        <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>

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/22969450) — Jamesking56, May 09 '19 at 14:57
Ok, I updated the answer in order to follow your suggestions. — FedeFonto, May 09 '19 at 15:29

score 0 · Answer 5 · answered Jun 21 '19 at 12:31

If you using newest Material components with related themes and want to put some layout into BottomAppBar you have to override BottomAppBar style in your themes.xml to remove nav drawer icon space at start (left side)

<style name="AppTheme.BottomAppBar" parent="@style/Widget.MaterialComponents.BottomAppBar">
    <item name="contentInsetStart">0dp</item>
    <item name="contentInsetStartWithNavigation">0dp</item>
</style>

and apply in your layout

        <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        style="@style/AppTheme.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/nav_view"
            style="@style/Widget.MaterialComponents.BottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/bgDefault"
            app:labelVisibilityMode="unlabeled"
            app:menu="@menu/bottom_nav_menu" />

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

score 0 · Answer 6 · answered Apr 20 '20 at 12:52

0

Re'em remarks are important. And I have one addition:

Replace android:outlineAmbientShadowColor and android:outlineSpotShadowColor as transparent by single outlineProvider=none

answered Apr 20 '20 at 12:52

seii.suns

1

score -7 · Answer 7 · answered Oct 15 '18 at 04:55

-7

I think you are new to Android Studio aswell.

I recommend you to watch tutorials on youtube.

I searched for the one I used before which worked out for me Bottom Navigation View. It is pretty short and you get the idea quickly.

answered Oct 15 '18 at 04:55

mrmeaaan

670
1
6
18

I think you didn't understand my question. Please read it again and then comment again. Thanks – Rubayet Hassan Sep 06 '19 at 18:23