如何在Android中创建如图所示的带圆角BottomSheet Dialog

步骤1：创建圆角背景Shape文件 #

先确保你的shape文件命名为res/drawable/bottom_sheet_rounded.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <!-- 仅设置顶部圆角 -->
    <corners 
        android:topLeftRadius="25dp" 
        android:topRightRadius="25dp" />
</shape>

步骤2：定义BottomSheetDialog的自定义样式 #

在res/values/styles.xml中添加以下样式，核心是设置背景透明，避免默认背景覆盖圆角效果：

<style name="RoundedBottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/RoundedBottomSheet</item>
</style>

<style name="RoundedBottomSheet" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
    <!-- 可选：设置弹窗默认弹出高度 -->
    <item name="behavior_peekHeight">50dp</item>
</style>

步骤3：编写BottomSheet的布局文件 #

创建res/layout/bottom_sheet_layout.xml，正确引用圆角背景，同时添加内边距避免内容贴边：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/curvedContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bottom_sheet_rounded"
    android:orientation="vertical"
    android:paddingTop="16dp"
    android:paddingHorizontal="16dp"
    android:paddingBottom="24dp">

    <!-- 这里添加你的弹窗内容，比如文本、按钮等 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="带圆角的BottomSheet示例"
        android:textSize="18sp"/>

</LinearLayout>

步骤4：在代码中显示BottomSheetDialog #

在Activity或Fragment中初始化并显示弹窗：

// Java示例
BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this, R.style.RoundedBottomSheetDialog);
bottomSheetDialog.setContentView(R.layout.bottom_sheet_layout);
bottomSheetDialog.setCancelable(true);
bottomSheetDialog.show();

// Kotlin示例
val bottomSheetDialog = BottomSheetDialog(this, R.style.RoundedBottomSheetDialog)
bottomSheetDialog.setContentView(R.layout.bottom_sheet_layout)
bottomSheetDialog.setCancelable(true)
bottomSheetDialog.show()

常见问题排查 #

• 圆角不显示：检查是否给BottomSheetDialog应用了正确的自定义样式，确保默认背景为透明，否则会覆盖你的圆角背景。
• 内容贴边：给布局添加适当的padding，避免内容直接顶在圆角边缘。
• 若使用BottomSheetBehavior（非Dialog形式）：需给目标View设置app:layout_behavior="@string/bottom_sheet_behavior"，同时同样设置父容器背景透明、子布局用圆角shape。

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