BottomNavigationView With FloatingActionButton

May 17, 2018

BottomNavigationView implementation usually involve fragment switching. If I need a FloatingActionButton within some of the fragments, there are 2 options:

Solution 1: Put FloatingActionButton in the layout of fragment.
Solution 2: Put FloatingActionButton in the same activity layout as BottomNavigationView, while sending event between activity and fragment to handle FloatingActionButton event and ui.

XML layout of Activity with BottomNavigationView (Based on Android Prevent BottomNavigationView Cover/Overlap Content/RecyclerView)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:layout_above="@+id/navigation">

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

            <!-- app:layout_scrollFlags="scroll|enterAlways" -->
            <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/AppTheme.PopupOverlay" />

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

        <!--  -->
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

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

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation"
         />

</RelativeLayout>

Solution 1

Put FloatingActionButton in the layout of fragment is a more straighforward solution. The following layout xml works well.

<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:id="@+id/fragmentContainer"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:name="com.luasoftware.pixpin.view.PhotoPinFragment"
    tools:context=".view.PhotoPinListFragment"
    >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutManager="android.support.v7.widget.LinearLayoutManager"
        tools:listitem="@layout/fragment_photopin_list_item"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@drawable/ic_photo_camera_black_24dp" />

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

If I allow appbar/toolbar to hide on scroll (app:layout_scrollFlags="scroll|enterAlways"), the FloatingActionButton is covered by BottomNavigationView when appbar/toolbar is visible (and appear normally above BottomNavigationView when appbar/toolbar is hidden)

BottomNavigationView Cover FAB

NOTE: I tried a few tweaking with app:layout_anchor="@+id/list" and app:layout_anchorGravity="bottom|end" for FloatingActionButton, but it fail to solve this problem.

If I allow appbar/toolbar to hide on scroll (app:layout_scrollFlags="scroll|enterAlways") with ScrollAwareFABBehavior, not only the FloatingActionButton is covered by BottomNavigationView, the bottom part of RecyclerView is covered by BottomNavigationView as well.

Solution 2

Put FloatingActionButton in the same activity layout as BottomNavigationView might seems like a more complicated solution as it involve sending event between activity and fragment for FloatingActionButton, but things are much simpler and predictable layout wise.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:layout_above="@+id/navigation">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.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:layout_scrollFlags="scroll|enterAlways" 
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

        <!--  -->
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />


        <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"
            app:layout_behavior="com.luasoftware.lualib2.ScrollAwareFABBehavior"
            app:tint="@android:color/white"
            app:srcCompat="@drawable/ic_photo_camera_black_24dp" />

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

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation"
         />

</RelativeLayout>

To handle event passing between activity and fragment, I use MutableLiveData (SingleLiveEvent to be exact).

class MainActivity : AppCompatActivity() {
    
    companion object {
        val fabClickEvent = SingleLiveEvent<Void>()
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)

        fab.setOnClickListener {
            fabClickEvent.call()
        }
    }
}

class PhotoPinListFragment : Fragment() {
    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)


        MainActivity.fabClickEvent.observe(this, Observer {
            // do something
        })
    }
}

If you are using a SnackBar within the fragment, make sure the view is CoordinatorLayout in activity to avoid UI overlap between FloatingActionBar and SnackBar.

activity?.let { activity ->
    if (activity is MainActivity) {
        // container is CoordinatorLayout
        val container = activity.container
        Snackbar.make(container, "Hello", Snackbar.LENGTH_INDEFINITE).show()
    }
}

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now