Android floating action button hidden behind of bottom navigation bar

Question

New to android programming & struggling with right now. I'm using android studio's default "Navigation Drawer Activity". On top of that, I've added a Bottom Bar from https://github.com/roughike/BottomBar. But, after adding that my FAB has hidden behind the Bottom Bar.

Here is the Scrrenshot -

I know it's some kind of style issue. I tried to give bottomMargin for FAB. But, it's not working.

Here is my code -

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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"
    android:fitsSystemWindows="true"
    tools:context="com.bhramaan.android.bhramaan.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/BhramaanTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/BhramaanTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

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

    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_gravity="bottom|end"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:bb_behavior="shy"
        android:background="@color/bottomBar"
        app:bb_activeTabColor="@color/white"
        app:bb_tabXmlResource="@xml/bottombar_tabs" />

</android.support.design.widget.CoordinatorLayout>

Need Some Guidance to solve this.

Answer 1

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

Answer 2

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 :)