Bottom Sheet is a CoordinatorLayout’s child view that slides up from bottom. It is material component and frequently used in android. Basically there are two types of Bottom Sheet , viz : Persistent Bottom Sheet(Standard) and Modal Bottom Sheet. As name suggests , in former one we can have interaction with other remaining area in screen and later one behaves like modal where we can’t interact with remaining area also the are is dimmed.

Now let’s go with the title of this post, here we deal with customizing Persistent Bottom Sheet where we add rounded, stroked background.

Step1: create layout file for bottom sheet named bottom_sheet_standard.xml

Here i have used Constraintlayout as root , we can also use LinearLayout but i suggest you to use ConstraintLayout for better performance. NB: this layout is normal ConstraintLayout with layout_behaviour com.google.android.material.bottomsheet.BottomSheetBehavior which force to work as Bottom Sheet.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_bs"
    android:id="@+id/bottomSheet"
    app:behavior_hideable="true"
    android:clickable="true"
    app:behavior_peekHeight="1dp"
    android:paddingBottom="15dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/gll"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/glr"
        android:orientation="vertical"
        app:layout_constraintGuide_end="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/tvTitle"
        android:text="@string/message_login_first"
        android:drawableLeft="@drawable/ic_info"
        android:textStyle="bold"
        android:textColor="@color/black"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="@id/gll"
        app:layout_constraintEnd_toEndOf="@id/glr"
        />

    <ImageView
        android:id="@+id/ivLogin"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="@id/gll"
        app:layout_constraintTop_toBottomOf="@id/tvTitle"
        android:src="@drawable/ic_logout" />

    <TextView
        android:id="@+id/tvLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Login"
        android:onClick="openLoginPage"
        android:textColor="#292929"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="@+id/ivLogin"
        app:layout_constraintStart_toEndOf="@+id/ivLogin"
        app:layout_constraintTop_toTopOf="@+id/ivLogin" />

    <ImageView
        android:id="@+id/ivClose"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="@id/gll"
        app:layout_constraintTop_toBottomOf="@id/ivLogin"
        android:src="@android:drawable/ic_menu_close_clear_cancel" />

    <TextView
        android:id="@+id/tvCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Close"
        android:onClick="closeSheet"
        android:textColor="#292929"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="@+id/ivClose"
        app:layout_constraintStart_toEndOf="@+id/ivClose"
        app:layout_constraintTop_toTopOf="@+id/ivClose" />
</androidx.constraintlayout.widget.ConstraintLayout>

Attribute app:behavior_hideable specify if it is hideable when swiped down, android:clickable= true makes sure that view under Bottom Sheet which is hiddend due to overlap is not clickable.

In editor above layout like

Step2: including above file inside main layout (CoordinateLayout) where bottom sheet is to be shown.

<?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"
    android:focusable="true"
    android:focusableInTouchMode="true">

    ...
    <include
        android:id="@+id/bottomNavigation"
        layout="@layout/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <include layout="@layout/bottom_sheet_standard" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step3: initialization of Bottom Sheet and click event to show / hide inside MainActivity.kt

//inside onCreate
bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet)

bottomSheetBehavior.addBottomSheetCallback(object :
BottomSheetBehavior.BottomSheetCallback() {
            override fun onSlide(bottomSheet: View, slideOffset: Float) {
            }

            override fun onStateChanged(bottomSheet: View, newState: Int) {
               
            }
        })

binding!!.mButton.setOnClickListener {
val state =
                    if (bottomSheetBehavior.state == BottomSheetBehavior.STATE_EXPANDED)
                        BottomSheetBehavior.STATE_COLLAPSED
                    else
                        BottomSheetBehavior.STATE_EXPANDED
            bottomSheetBehavior.state = state

           
        }

Results:

Other References:

https://developer.android.com/reference/com/google/android/material/bottomsheet/package-summary

https://material.io/develop/android/components/sheets-bottom