androidxmlfloating-action-buttonandroid-bottomnav

FAB on top of Bottom Navigation


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:

enter image description here


Solution

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