如何为Material 3下的Bottom Sheet Fragment添加类似YouTube的边距？

我想实现类似新版YouTube应用的Bottom Sheet Fragment效果（带有左右侧边距），但基于Material 3设计规范，之前尝试过旧的Bottom Sheet自定义方案，无法正常生效。

我的Bottom Sheet布局代码（fragment_bottom.xml）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".utils.Bottom">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="@dimen/dimen_48"
        android:gravity="center_vertical"
        android:text="This is a bottom sheet"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="@dimen/dimen_48"
        android:gravity="center_vertical"
        android:text="This is a bottom sheet"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="@dimen/dimen_48"
        android:gravity="center_vertical"
        android:text="This is a bottom sheet"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="@dimen/dimen_48"
        android:gravity="center_vertical"
        android:text="This is a bottom sheet"/>
</LinearLayout>

我的Bottom Sheet Fragment类代码：

class BottomSheet : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = View.inflate(context,R.layout.fragment_bottom,null)
        return view
    }

}

在Material 3中，Bottom Sheet的样式控制逻辑有调整，以下是两种可行的实现方式：

方式一：通过自定义Dialog样式实现 #

1. 在styles.xml（或themes.xml）中添加Material 3风格的Bottom Sheet自定义样式：

<style name="CustomBottomSheetDialog" parent="Theme.Material3.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/CustomBottomSheet</item>
</style>

<style name="CustomBottomSheet" parent="Widget.Material3.BottomSheet">
    <!-- 设置左右边距，可按需调整数值 -->
    <item name="android:layout_marginLeft">16dp</item>
    <item name="android:layout_marginRight">16dp</item>
    <!-- 可选：添加顶部圆角，贴合YouTube风格 -->
    <item name="shapeAppearanceOverlay">@style/CustomBottomSheetShape</item>
</style>

<style name="CustomBottomSheetShape" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">16dp</item>
    <item name="cornerSizeTopRight">16dp</item>
</style>

2. 在Bottom Sheet Fragment中应用该样式：

class BottomSheet : BottomSheetDialogFragment() {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
        dialog.setStyle(STYLE_NORMAL, R.style.CustomBottomSheetDialog)
        return dialog
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_bottom, container, false)
    }
}

方式二：直接修改布局容器的边距 #

若不想修改全局样式，可通过嵌套布局容器直接设置边距：
修改fragment_bottom.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:paddingLeft="16dp"
    android:paddingRight="16dp"
    tools:context=".utils.Bottom">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="@drawable/bottom_sheet_rounded_bg">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="@dimen/dimen_48"
            android:gravity="center_vertical"
            android:text="This is a bottom sheet"/>
        <!-- 其他TextView组件 -->
    </LinearLayout>
</LinearLayout>

创建drawable/bottom_sheet_rounded_bg.xml作为圆角背景：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white"/>
    <corners android:topLeftRadius="16dp" android:topRightRadius="16dp"/>
</shape>

注意：使用该方式需确保Bottom Sheet默认背景透明，否则边距会被覆盖，可在Fragment中补充设置：

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
    dialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
    return dialog
}

内容的提问来源于stack exchange，提问作者luckybiglarge