BottomSheetDialog is a pop-up dialog box in Android development. It pops up from the bottom of the screen and covers part of the main interface.
1. Use of BottomSheetDialog
// 参数2:设置BottomSheetDialog的主题样式;将背景设置为transparent,这样我们写的shape_bottom_sheet_dialog.xml才会起作用
BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this, R.style.BottomSheetDialog);
//不传第二个参数
//BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);
// 底部弹出的布局
View bottomView = LayoutInflater.from(requireContext()).inflate(R.layout.bottom_sheet_layout, null);
bottomSheetDialog.setContentView(bottomView);
//设置点击dialog外部不消失
//bottomSheetDialog.setCanceledOnTouchOutside(false);
bottomSheetDialog.show();
2. Load layout
bottom_sheet_layout.xml; After getting the bottom pop-up window layout through LayoutInflater, load the layout into BottomSheetDialog through setContentView().
<?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="wrap_content"
android:orientation="vertical"
android:background="@drawable/shape_bottom_sheet_dialog">
<TextView
android:id="@+id/choose_photo"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="从手机相册选择"
android:textSize="15sp"
android:textColor="#191919"
android:gravity="center"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#F5F5F5"/>
<TextView
android:id="@+id/check_photo"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="查看上一张头像"
android:textSize="15sp"
android:textColor="#191919"
android:gravity="center"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#F5F5F5"/>
<TextView
android:id="@+id/save_photo"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="保存到手机"
android:textSize="15sp"
android:textColor="#191919"
android:gravity="center"/>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#F5F5F5"/>
<TextView
android:id="@+id/cancel"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="取消"
android:textSize="15sp"
android:textColor="#191919"
android:gravity="center"/>
</LinearLayout>
3.Display
The bottom pop-up window can be displayed by calling the BottomSheetDialg.show() method.
4. BottomSheetDialog rounded corners settings
Write a shape, create a shape_bottom_sheet_dialog.xml under Drawable, and set the rounded corner style in it.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:topLeftRadius="@dimen/dime_10dp"
android:topRightRadius="@dimen/dime_10dp"/>
<solid android:color="@color/white"/>
</shape>
Set the entire background of bottom_sheet_layout.xml to the shape_bottom_sheet_dialog.xml shape.
With the above settings, the rounded corner effect is not displayed. You also need to set the background of BottomSheetDialog to transparent. Add the following two in themes.xml(res->values->themes)style。
<!--实现BottomSheetDialog圆角效果-->
<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>
<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@android:color/transparent</item>
</style>
In the second parameter of new BottomSheetDialog(), pass in this style.
new BottomSheetDialog(this, R.style.BottomSheetDialog);