Android Bottom Sheet透明背景实现问题求助

嗨，我看你现在遇到的问题是Bottom Sheet的根布局没法透明，而且要让圆形部分超出布局显示对吧？咱们一步步来解决：

第一步：调整布局文件，让根布局透明并允许子View“跑出去” #

首先你得把根LinearLayout的红色背景改成透明，然后开启允许子View超出父布局的属性——这是让圆形能显示在布局外的关键：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:orientation="vertical"
    android:background="@android:color/transparent" <!-- 把红色改成透明 -->
    android:clipChildren="false" <!-- 允许子View超出父布局边界 -->
    android:clipToPadding="false"> <!-- 配合上面的属性，padding区域也不裁剪子View -->

    <!-- 先放你的圆形View，让它悬浮在上方并偏移出布局 -->
    <ImageView
        android:id="@+id/circle_icon"
        android:layout_width="@dimen/_50sdp"
        android:layout_height="@dimen/_50sdp"
        android:src="@drawable/your_circle_shape" <!-- 替换成你的圆形资源 -->
        android:layout_gravity="top|center_horizontal"
        android:translationY="@dimen/_25sdp" <!-- 向上偏移一半，让圆形一半在布局外 -->
        android:background="@color/colorWhite"/>

    <!-- 原来的白色内容区域，保持你的原有结构 -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="@dimen/_25sdp"
            android:background="@color/colorWhite"
            android:orientation="vertical">

            <!-- 这里是你的表单内容，TextView、EditText这些都保留原样 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/_20sdp"
                android:layout_marginRight="@dimen/_20sdp"
                android:layout_marginTop="@dimen/_45sdp"
                android:orientation="vertical">

                <!-- ... 你的原有表单控件 ... -->
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>
</LinearLayout>

第二步：处理BottomSheetDialog的窗口背景 #

这是你之前透明无效的核心原因！BottomSheetDialog默认自带一个半透明的窗口背景，就算你把布局改成透明，这个窗口背景还是会显示出来。所以要在代码里把它去掉：

如果你用的是BottomSheetDialog：

BottomSheetDialog bottomSheet = new BottomSheetDialog(this);
bottomSheet.setContentView(R.layout.your_bottom_sheet_layout);

// 关键：把窗口背景设为透明
bottomSheet.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
// 可以设置弹窗的初始高度，比如包裹内容
bottomSheet.getBehavior().setPeekHeight(ViewGroup.LayoutParams.WRAP_CONTENT);

bottomSheet.show();

如果你用的是BottomSheetDialogFragment，就在onCreateDialog里加这段：

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    BottomSheetDialog dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState);
    View sheetView = LayoutInflater.from(getContext()).inflate(R.layout.your_bottom_sheet_layout, null);
    dialog.setContentView(sheetView);
    // 同样设置窗口背景透明
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    return dialog;
}

第三步：圆形View的小技巧 #

如果你的圆形还没做，可以用ShapeDrawable快速实现：
在drawable文件夹新建bg_circle.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorWhite"/>
    <!-- 可以加个边框 -->
    <stroke android:width="2dp" android:color="@color/colorLightGray"/>
</shape>

然后把圆形ImageView的android:src指向这个文件就行。

这样改完之后，你的Bottom Sheet根布局就会是透明的，圆形也能正常显示在布局外面，和你想要的对话框效果一致啦～

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