Android floating action button hidden behind of bottom navigation bar
Add app:elevation="@dimen/text_margin" like this:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email"
app:elevation="@dimen/text_margin" /><!--adding this line should resolve your problem-->
Here is a solution that works for our use case. Basically we wanted to hide bottom navigation view and the fab that belongs to it whenever the user scrolls in the screen.
For that purpose we have decided to use the app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
that comes out of the box for BottomNavigationView
. All that is left is to anchor the fab to the BottomNavigationView
and use the same layout_behavior
on fab, too.
Here is an example of it:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="@layout/inc_app_bar"/>
<fragment
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:id="@+id/main_nav_host_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/bottom_nav_graph"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/main_bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
style="@style/Theme.BottomNavigationView"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:labelVisibilityMode="labeled"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_nav_menu"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/main_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/main_bottom_nav_view"
app:layout_anchorGravity="top|end"
android:layout_marginBottom="@dimen/fab_margin_bottom"
android:layout_marginEnd="@dimen/fab_margin_end"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:srcCompat="@drawable/ic_add_24px"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Other than that you can define your own layout_behavior for fab as explained in GitHub: BlogPosts / android-coordinatorlayout-scrolling-hide-fab-behavior.md too.
I hope that it helps :)