Bottom Sheet Above Bottom Navigation

Show BottomSheetDialog above the BottomNavigation in android.

Photo by Nicole Avagliano on Unsplash

🏃 Hello, In this article, we are going to implement BottomSheetDialog above BottomNaviationMenu in android. Many application uses this kind of design to make features easily accessible. As a developer & user, I love BottomSheet design on applications. Let me know in the comment what you think of it.🎃

Answer on StackOverflow.

Bottom Sheet Above Bottom Navigation

Introduction

Bottom sheets are surfaces containing supplementary content that is anchored to the bottom of the screen. Bottom sheets can display a wide variety of content and layouts, ranging from menu items (in list and grid layouts) to supplemental content laid out according to the layout grid.

Let’s get started, with the types of bottom sheet dialog we can make in android.

Modal and Persistent dialogs.

1. Modal Bottom Sheet Dialog

Modal bottom sheets have a higher elevation than the app. These usually replace menus or alert dialogs. We can use any layout as a parent layout in this type of dialog. It is similar to custom dialogs, the difference is it shows from the bottom of the screen.

Source https://material.io/

You can find Modal Bottom Sheet Dialog Implementation in the project source.

2. Persistent Bottom Sheet Dialog

Unlike from model bottom sheet, a persistent bottom sheet dialog should be the child of CoordinatorLayout. It displays in-app content. It will be displayed at the bottom of the screen making some portion of the content visible.

NOW, You may have an idea that to implement the bottom sheet above bottom navigation we need a Persistent Bottom Sheet Dialog. To use, it should be a child of the CoordinatorLayout.

Implementation

To implement a Bottom Sheet dialog with Bottom Navigation, you need a material design library. We can use it with/without Navigation Component.

implementation 'com.google.android.material:material:1.2.1'

Let’s get our hands dirty 👐 by creating UI for our bottom sheet dialog with TextView & RecyclerView only.

item_bottom_sheet_container.xml

Now, User interface is ready, Let’s include this layout in our MainActivity Layout. Our activity will contain CoordinatorLayout, NavHostFragment, BottomNavigationView inside ConstraintLayout. This part is a bit tricky you can modify/place your view accordingly as you like depending on how you want your UI to look. 😈

Remember to set bottom sheet root layout behavior as.

app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"

activity_main.xml

activity_main.xml — Preview Interface

If you run current code, obviously UI code. Your bottom sheet may not be visible, or it may be hiding somewhere.

Maybe, It is afraid of you? 😮

No !

View is hiding because we didn’t provide bottom sheet peekHeight , set BottomSheetBehavior Peek Height in activity/fragment like.

val bottomSheetParent = findViewById<ConstraintLayout>(R.id.bottom_sheet_parent)
val mBottomSheetBehaviour = BottomSheetBehavior.from(bottomSheetParent)
val tv = TypedValue()
if (theme.resolveAttribute(R.attr.actionBarSize, tv, true)) {
    val actionBarHeight = TypedValue.complexToDimensionPixelSize(
        tv.data,
        resources.displayMetrics
    )
    mBottomSheetBehaviour.peekHeight = actionBarHeight
}

Here, You can calculate your own peekHeight depending on how much of view you want to display above BottomNavigation.

Usually, It’s a size of actionBarHeight so that view will just peek at you and you can pull your bottom sheet to view the full content.

Output

Outputs From Above Implementation

That’s all, Working code here

iamnaran/turbo-sheet-android

Some Things to Keep In Mind

1. To use BottomNavigationView, Remember to set your theme with MaterialComponents,

<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    .....
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:windowLightNavigationBar">true</item>

</style>

2. Your Layouts (View/ RecyclerView) bottom part may hides behind bottom navigation, To fix this, Add android:paddingBottom of the desired size and set android:clipToPadding=”false”.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view_bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:paddingBottom="?attr/actionBarSize" />

Leaving this old xml layout with RelativeLayout as parent here. If in case.

activity_main.xml

<?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:background="@android:color/transparent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_above="@id/bottom_navigation_parent"
        android:layout_height="match_parent">


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


            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="?attr/colorPrimary" />


        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/bottom_sheet_parent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

            <LinearLayout
                android:id="@+id/bottom_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <View
                    android:layout_width="20dp"
                    android:layout_height="4dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:background="@drawable/view_bottom_sheet_top" />

                <TextView
                    android:id="@+id/near_by"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/normal"
                    android:gravity="center"
                    android:includeFontPadding="false"
                    android:padding="10dp"
                    android:text="Book Now"
                    android:textAllCaps="true"
                    android:textColor="?attr/colorPrimaryText"
                    android:textSize="12sp" />

            </LinearLayout>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view_maps"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/bottom_view"
                android:layoutAnimation="@anim/layout_animation">

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

        </RelativeLayout>



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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/bottom_navigation_parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:fitsSystemWindows="true"
        app:elevation="1dp">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorContainerBackground"

            />

        .... Your Bottom Navigation Menu .....


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


</RelativeLayout>

Activity/Fragment.java

private RelativeLayout bottomSheetParentLayout;
    private BottomSheetBehavior mBottomSheetBehaviour;

   mBottomSheetBehaviour = BottomSheetBehavior.from(bottomSheetParentLayout);

  if (bottomNavigation != null) {

        mBottomSheetBehaviour.setPeekHeight(bottomNavigation.getHeight() + 90);

    }

Let me know if there’s another way to implement it. Comments if you need help or have queries on this topic…

Goodbye, Take Care… Happy Coding