Overlay and bottom navigation bar

[Leeeeerich]

Hi! When I use the fab menu with overlay and bottom nav bar, overlay not hiding the bottom nav bar and I might click on buttons in the bottom navbar. How I might hiding my bottom nav bar with an overlay?

[kabumere]

Hey @Leeeeerich,

To have the Overlay cover a BottomAppBar, you must define the Overlay AFTER the BottomAppBar.

So while I haven't tested with a Bottom Navigation Bar like in your case, the same principle should work. Please define your Overlay AFTER your Bottom Navigation Bar. If this does not work, please let me know and I will test locally.

[kabumere]

Hey @Leeeeerich,

Did the above solution work for you?

[Leeeeerich]

Hi! Sorry, I didn't have time. Okay, it not work I try:

        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include
            android:id="@+id/toolBar"
            layout="@layout/toolbar_home"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <fragment
            android:id="@+id/home_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:defaultNavHost="true"
            app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/toolBar"
            app:navGraph="@navigation/home_graph" />

        <com.nambimobile.widgets.efab.ExpandableFabLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

<!-- I try and here -->

            <com.nambimobile.widgets.efab.Overlay
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:overlay_orientation="portrait"/>

<!-- I try and here -->

            <com.nambimobile.widgets.efab.ExpandableFab
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="65dp"
                android:layout_marginEnd="10dp"
                app:efab_orientation="portrait"/>
            <com.nambimobile.widgets.efab.FabOption
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:fab_orientation="portrait"
                app:label_text="Portrait Option 1"
                android:onClick="onClickPortraitOption1"/>

            <com.nambimobile.widgets.efab.Overlay
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:overlay_orientation="landscape"/>
            <com.nambimobile.widgets.efab.ExpandableFab
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="65dp"
                android:layout_marginEnd="10dp"
                app:efab_orientation="landscape"/>
            <com.nambimobile.widgets.efab.FabOption
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:fab_orientation="landscape"
                app:label_text="Landscape Option 1"
                android:onClick="onClickLandscapeOption1"/>

        </com.nambimobile.widgets.efab.ExpandableFabLayout>

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            style="@style/Widget.MaterialComponents.BottomNavigationView.BottomNavMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/bottom_navigation_menu" />
    </androidx.constraintlayout.widget.ConstraintLayout>```

![Screenshot_1610194284](https://user-images.githubusercontent.com/26391015/104091261-08ff2900-5285-11eb-98b1-64c99a4fd865.png)

[kabumere]

Hey @Leeeeerich,

The solution was to place your BottomNavigationView inside the ExpandableFabLayout, then place your two Overlay views after your BottomNavigationView. Your BottomNavigationView also needs a color and its elevation set to 0 (so that the ExpandableFabLayout is drawn over it).

Try the solution below and let me know if it works. The XML below should replace your ExpandableFabLayout AND your BottomNavigationView. NOTE: You can replace the android:background with whatever color you want to use.

<com.nambimobile.widgets.efab.ExpandableFabLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.nambimobile.widgets.efab.ExpandableFab
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="65dp"
                android:layout_marginEnd="10dp"
                app:efab_orientation="portrait"/>
            <com.nambimobile.widgets.efab.FabOption
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:fab_orientation="portrait"
                app:label_text="Portrait Option 1"
                android:onClick="onClickPortraitOption1"/>

            <com.nambimobile.widgets.efab.ExpandableFab
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="65dp"
                android:layout_marginEnd="10dp"
                app:efab_orientation="landscape"/>
            <com.nambimobile.widgets.efab.FabOption
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:fab_orientation="landscape"
                app:label_text="Landscape Option 1"
                android:onClick="onClickLandscapeOption1"/>

             <!-- Elevation must be 0dp, and android:background must be set (to whatever color you want) -->
             <com.google.android.material.bottomnavigation.BottomNavigationView
                 android:id="@+id/bottomNavigationView"
                 style="@style/Widget.MaterialComponents.BottomNavigationView.BottomNavMenu"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_gravity="bottom"
                 android:background="@color/colorPrimary"
                 app:elevation="0dp"
                 app:menu="@menu/bottom_navigation_menu" />

             <!-- Your Overlays must come AFTER the BottomNavigationView in order for the Overlays to be drawn over the BottomNavigationView  -->
             <com.nambimobile.widgets.efab.Overlay
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:overlay_orientation="portrait"/>
             <com.nambimobile.widgets.efab.Overlay
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:overlay_orientation="landscape"/>
        </com.nambimobile.widgets.efab.ExpandableFabLayout>

[Leeeeerich]

Hey! It worked for me, thanks!!!