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 <

Answer 1

Its just margin issue. Just try to implement this code in your coordinatorLayout

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="?attr/actionBarSize">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            style="@style/floating_action_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:src="@drawable/ic_add_plus" />
</FrameLayout>

And use this style in your style.xml file.

<style name="floating_action_button">
        <item name="android:layout_marginBottom">16dp</item>

</style>

We're just doubling the margin. First BottomNavigationView, and Second the default margin of FAB.

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

Answer 3

Change your xml as this. Add some more properties to your Floating Action Button.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_gravity="bottom|end"
    android:layout_marginBottom="70dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp"
    android:src="@android:drawable/ic_dialog_email" />

Answer 4

In advance I let other know this solution fits to my needs. I don't need fancy animations(which is ok, but not for my project requirements). What I did is to wrap the main content(FrameLayout), the FAB and the BottomNavigationView inside a RelativeLayout. Again, I think this could be done in a better way, so i'm open to suggestions.

<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.support.design.widget.AppBarLayout
        android:id="@+id/admin_appbar_layout"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="fill_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        tools:elevation="4dp">

        <!-- The toolbar -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/admin_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/customActionBar"
            app:theme="@style/customActionBar"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal">

                <TextView
                    android:id="@+id/tv_toolbar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    style="@style/H2_bold"
                    android:text="@string/activity_admin_name"/>

            </LinearLayout>

            </android.support.v7.widget.Toolbar>

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize">

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/bottom_navigation_bar"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_add_new_item"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/ic_action_new"
            android:layout_alignParentEnd="true"
            android:layout_above="@+id/bottom_navigation_bar"
            android:layout_margin="@dimen/fab_dimen"
            tools:elevation="2dp"/>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            app:itemBackground="@color/black"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:menu="@menu/admin_bottom_navigation_items"
            tools:elevation="2dp"/>

    </RelativeLayout>

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

I know the question may seems old, but hope this helps to someone else.

Answer 5

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