Bottom Sheet

A Bottom Sheet in Android is a component that slides up from the bottom of the screen to display additional content. It can be used for menus, dialogs, or to provide more details about an item.

Create Background of BottomSheet

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <corners android:topLeftRadius="@dimen/dimen_20dp"
        android:topRightRadius="@dimen/dimen_20dp"/>
</shape>

Create Style of BottomSheet

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="OnelibBottomDialog" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/OnelibBottomDialog</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowSoftInputMode">adjustResize|stateAlwaysVisible</item>
    </style>

    <style name="OnelibModalDialog" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/bg_bottom_sheet</item>
    </style>
</resources>

And then, create a blank fragment and design the xml file. For example

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="@dimen/dimen_16dp"
    android:orientation="vertical"
    tools:context=".presentation.bottomsheet.BottomSheetFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title of Bottom Sheet"
        android:textSize="@dimen/text_size_16sp"
        android:textColor="@color/black"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/lorem"
        android:layout_marginTop="@dimen/dimen_12dp"
        android:textSize="@dimen/text_size_14sp"
        android:textColor="@color/black"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_close"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Close Bottom Sheet"
        android:layout_marginTop="@dimen/dimen_16dp"
        android:layout_marginBottom="@dimen/dimen_24dp"
        style="?attr/materialButtonOutlinedStyle"/>

</androidx.appcompat.widget.LinearLayoutCompat>

After that, implement BaseBottomSheetDialogFrament to your fragment. For example:

class BottomSheetFragment : BaseBottomSheetDialogFragment<FragmentBottomSheetBinding>() {

    companion object {
        fun newInstance(
            data: (String) -> Unit
        ): BottomSheetFragment = BottomSheetFragment().apply {
            this.data = data
        }
    }

    private var data: (String) -> Unit = {}

    override val bottomSheetTheme: Int = R.style.OnelibBottomDialog
    override val tagName: String = BottomSheetFragment::class.java.name

    override fun getViewBinding(
        layoutInflater: LayoutInflater,
        container: ViewGroup?,
        attachRoot: Boolean
    ): FragmentBottomSheetBinding {
        return FragmentBottomSheetBinding.inflate(layoutInflater, container, attachRoot)
    }

    override fun initUI() {
        // Handle UI here
    }

    override fun initAction() {
        binding.btnClose.onClick {
            data.invoke("Data from bottom sheet")
            dismiss()
        }
    }

    override fun initProcess() {
        // Handle process here
    }

    override fun initObservers() {
        // Handle observer here
    }

}

if you don't need callback from BottomSheet, you can remove parameter data in newInstance

After the bottomsheet is created, the next step is the implementation on the activity/fragment. For example:

class BottomSheetActivity : BaseActivity<ActivityBottomSheetBinding>() {

    override fun getViewBinding(): ActivityBottomSheetBinding {
        return ActivityBottomSheetBinding.inflate(layoutInflater)
    }

    override fun initIntent() {
        // Handle intent here
    }

    override fun initUI() {
        // Handle UI here
    }

    override fun initAction() {
        binding.btnOpen.onClick {
            BottomSheetFragment.newInstance {
                showToast(it)
            }.show(supportFragmentManager, BottomSheetFragment::class.java.name)
        }
    }

    override fun initProcess() {
        // Handle process here
    }

    override fun initObservers() {
        // Handle observer here
    }

}

The Result

Result of BottomSheet