不囉嗦，先上圖

最外層布局layout.xml

<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"
    tools:context=".MainActivity">
    <!-- Adding main view content -->
    <include layout="@layout/activity_main" />

    <!-- Adding bottom sheet after main content -->
    <include layout="@layout/bottom_sheet" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

要使用BottomSheet，最外層的容器必須要是CoordinatorLayout。

接著我們include了兩個布局，主畫面跟BottomSheet。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingEnd="16dp"
    android:paddingStart="16dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorAccent">

    </FrameLayout>

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:onClick="showBottomSheet"
        android:text="Bottom Sheet" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/hideBottomSheetButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:onClick="hideBottomSheet"
        android:text="Hide Bottom Sheet" />
</LinearLayout>

bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    app:behavior_hideable="false"
    app:behavior_peekHeight="120dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/AtextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="ItemA"
            android:textColor="@android:color/background_light"
            android:textSize="24sp" />
        <TextView
            android:id="@+id/BtextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="ItemB"
            android:textColor="@android:color/background_light"
            android:textSize="24sp" />
        <TextView
            android:id="@+id/CtextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="ItemC"
            android:textColor="@android:color/background_light"
            android:textSize="24sp" />
        <TextView
            android:id="@+id/DtextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="ItemD"
            android:textColor="@android:color/background_light"
            android:textSize="24sp" />
        <TextView
            android:id="@+id/EtextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="ItemE"
            android:textColor="@android:color/background_light"
            android:textSize="24sp" />
        <TextView
            android:id="@+id/FtextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="ItemF"
            android:textColor="@android:color/background_light"
            android:textSize="24sp" />
        <TextView
            android:id="@+id/GtextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@color/design_default_color_primary"
            android:gravity="center"
            android:text="ItemG"
            android:textColor="@android:color/background_light"
            android:textSize="24sp" />
    </LinearLayout>

要使用BottomSheet，必須要在該層宣告以下設定

• app:behavior_hideable="false"
• app:behavior_peekHeight="120dp"
• app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

MainActivity

class MainActivity : AppCompatActivity() {
    lateinit var bottomBehavior: BottomSheetBehavior<View>
    lateinit var bottomSheet: View
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.layout)

        bottomBehavior = BottomSheetBehavior.from(bottom_sheet)
        hideBottomSheetButton.setOnClickListener {
            hideBottomSheet()
        }
    }
    fun  hideBottomSheet(){
        bottomBehavior.isHideable=true
        bottomBehavior.state = BottomSheetBehavior.STATE_HIDDEN

    }
    fun showBottomSheet(v: View) {
        bottomBehavior.isHideable=false
        setBottomViewVisible(bottomBehavior.state != BottomSheetBehavior.STATE_EXPANDED)
    }

    private fun setBottomViewVisible(showFlag: Boolean) {

        if (showFlag)
            bottomBehavior.state = BottomSheetBehavior.STATE_EXPANDED
        else
            bottomBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
    }
}

BottomSheets總共有幾種狀態

• STATE_COLLAPSED: 默認折疊狀態，只顯示底部一小部分佈局，顯示高度可以通過app:behavior_peekHeight設置。
• STATE_DRAGGING: 過渡狀態，此時BottomSheets正在向上或向下拖動。
• STATE_SETTLING: 手勢離開視圖，自由滑動到停止的一小段時間
• STATE_EXPANDED: 佈局全展開狀態。
• STATE_HIDDEN: 默認無此狀態(可通過：app:behavior_hideable啟用此狀態)，用戶能通過下向滑動，完全隱藏BottomSheets。

根據這樣的設定就可以完成一個簡單的BottomSheet了。