FAB on top of Bottom Navigation

Question

How to display a fab on top of a Bottom Navigation? This is what I tried:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/trendingPosts"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/trendingPosts"
        android:focusedByDefault="true"
        android:focusable="true"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/trendingPosts"
        app:layout_constraintTop_toBottomOf="@+id/trendingPosts"
        app:menu="@menu/main_menu"
        android:focusable="false"
        android:focusedByDefault="false"/>

But, the fab stays below it. See the image:

Does this answer your question? [Bottom Navigation with fab](https://stackoverflow.com/questions/51094118/bottom-navigation-with-fab) — a_local_nobody, May 10 '22 at 13:20

score 2 · Accepted Answer · answered May 20 '23 at 19:45

A good hack is to use elevation parameter in both BottomNavigationView and FloatingActionButton and put elevation of fab button more than BottomNavigationView like this :

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

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav_instructor"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/white"
    android:elevation="15dp"
    app:itemIconSize="18dp"
    app:itemTextColor="@color/light_grey_text_color"
    style="@style/Theme.OpenInApp"
    app:itemIconTint="@color/light_grey_text_color"
    app:labelVisibilityMode="labeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/home_bottom_nav">

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

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_marginBottom="25dp"
    android:layout_gravity="bottom|right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/add"
    app:elevation="20dp"
    app:layout_constraintBottom_toBottomOf="@+id/bottom_nav_instructor"
    app:layout_constraintEnd_toEndOf="@+id/bottom_nav_instructor"
    app:layout_constraintStart_toStartOf="@+id/bottom_nav_instructor" />

 </androidx.constraintlayout.widget.ConstraintLayout>

Are you sure that it works? – Sambhav Khandelwal May 22 '23 at 16:11 — Sambhav Khandelwal, May 22 '23 at 16:11
Yes, definitely you can try the above code too. It works! – Sreyans Bohara May 23 '23 at 06:19 — Sreyans Bohara, May 23 '23 at 06:19

Yunus D · Answer 2 · 2022-05-10T12:47:04.873

You need to use coordinator layout

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            
            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_menu"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="@+id/trendingPosts"
                app:layout_constraintTop_toBottomOf="@+id/trendingPosts"
                app:menu="@menu/main_menu"
                android:focusable="false"
                android:focusedByDefault="false"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

       <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="32dp"
            android:layout_gravity="bottom|center"
            android:focusedByDefault="true"
            android:focusable="true"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

FAB on top of Bottom Navigation

2 Answers2