BottomSheetDialogFragment的圆角

我有一个自定义的bittomsheetdialogfragment，我想在底部视图的顶部有圆角

这是我的自定义类，它膨胀了我想要从底部显示的布局

View mView;


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mView = inflater.inflate(R.layout.charge_layout, container, false);
initChargeLayoutViews();
return mView;
}

我还有这个XML资源文件作为背景:

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


<padding android:top="10dp"
android:bottom="10dp"
android:right="16dp"
android:left="16dp"/>
</shape>

问题是，当我把这个资源文件设置为我的布局的根元素的背景，角仍然不是圆角。

我不能使用以下代码:

this.getDialog().getWindow().setBackgroundDrawableResource(R.drawable.charge_layout_background);

因为它覆盖了底部对话框的默认背景，底部视图上方不会有任何半透明的灰色。

134115 次浏览
小开

我今天也检查了同样的事情，是的，你是对的，下面的代码

this.getDialog().getWindow().setBackgroundDrawableResource(R.drawable.charge_layout_background);

这适用于片段背景，所以相反，你应该从对话框窗口获得底部表视图，并改变背景，这里是代码

 @SuppressLint("RestrictedApi")
@Override
public void setupDialog(Dialog dialog, int style) {
super.setupDialog(dialog, style);
View rootView = getActivity().getLayoutInflater().inflate(R.layout.view_member_info,null,false);
unbinder = ButterKnife.bind(this, rootView);
adjustUIComponents();
dialog.setContentView(rootView);
FrameLayout bottomSheet = (FrameLayout) dialog.getWindow().findViewById(android.support.design.R.id.design_bottom_sheet);
bottomSheet.setBackgroundResource(R.drawable.container_background);
}

这里的底部是你想要改变的实际视图。

小开

修复此问题的另一种方法是扩展BottomSheetDialog并创建适合您需要的自定义类。您可以为布局xml文件做同样的事情，并添加背景或任何其他所需的自定义。这也有一个好处，你将不依赖于Android使用的id名称(Android .support.design. r.id .design_bottom_sheet)，而改变背景(尽管id名称的变化很少发生AFAIK)。

小开

答黄家驹Yip从另一个问题为我工作，你应该尝试一下。

在drawable中创建一个xml，比如dialog_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white"/>
<corners android:radius="30dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>

把这个放在你的布局XML根节点中:

将其设置为布局XML中的背景

android:background="@drawable/dialog_bg"

并在onCreateView()中放入:

将对话框的背景设置为透明

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
小开

在你的BottomsheetDialogFragment类中添加这两个方法。

public void setDialogBorder(Dialog dialog) {
FrameLayout bottomSheet = (FrameLayout) dialog.getWindow().findViewById(android.support.design.R.id.design_bottom_sheet);
bottomSheet.setBackground(new ColorDrawable(Color.TRANSPARENT));
setMargins(bottomSheet, 10, 0, 10, 20);
}


private void setMargins(View view, int left, int top, int right, int bottom) {
if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
p.setMargins(left, top, right, bottom);
view.requestLayout();
}
}

现在在你的BottomsheetDialogFragment类的setupDialog()方法中调用setDialogBorder(dialog)方法。

现在在可绘制文件夹中创建一个形状文件。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />


<solid android:color="@color/white" />
<stroke
android:width="1dp"
android:color="@color/transparent" />
</shape>

现在在xml文件中设置父视图组对话框视图的背景。

android:background="@drawable/round_border_white"

完成了! !

小开

创建一个自定义的圆角绘图，并将其设置为你的BottomSheetDialogFragment的布局根的背景

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">


<solid android:color="@color/colorPrimary" />


<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="12dp"
android:topRightRadius="12dp" />


</shape>

然后简单地将下面的代码添加到您的BottomSheetDialogFragment类

@Override
public void setupDialog(Dialog dialog, int style) {
super.setupDialog(dialog, style);
View contentView = View.inflate(getContext(),
R.layout.fragment_bottom_sheet, null);
dialog.setContentView(contentView);


CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent())
.getLayoutParams();
CoordinatorLayout.Behavior behavior = params.getBehavior();
((View) contentView.getParent()).setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));
}

你甚至可以像下面这样使用参数来设置边距

params.setMargins(50, 0, 50, 0);
小开

BottomSheetDialog设置了默认的白色背景色，这就是为什么角是不可见的。为了显示它们，你需要通过覆盖BottomSheetDialog的样式来使对话框的背景透明。

在res/values/styles/styles.xml中定义此样式

<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>

并将此样式设置为您的BottomSheetDialog

View view = getLayoutInflater().inflate(R.layout.chooser_bottom_sheet, null);
BottomSheetDialog dialog = new BottomSheetDialog(this,R.style.BottomSheetDialog); // Style here
dialog.setContentView(view);
dialog.show();
小开

这个答案仅适用于在布局中设置了圆角背景的可绘制对象后，将背景颜色设置为Color.TRANSPARENT的问题。

除了覆盖setupDialog()解决方案外，没有一个答案对我有效，将背景颜色设置为Color.TRANSPARENT:

@Override
public void setupDialog(Dialog dialog, int style) {
super.setupDialog(dialog, style);
View contentView = View.inflate(getContext(),
R.layout.fragment_bottom_sheet, null);
dialog.setContentView(contentView);
...
((View) contentView.getParent()).setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));
}

但你在这里为对话设置的contentView不是你在onViewCreated()中膨胀时得到的view。它打破了标准流程，所以可能会出现一些麻烦，比如你不能在onViewCreated()中使用View Bindings - Kotlin Android Extensions

所以我稍微调整了一下，在onActivityCreated()中设置了背景:

override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
(view?.parent as View).setBackgroundColor(Color.TRANSPARENT)
}

希望这对遇到同样麻烦的人有所帮助

小开
最佳答案

创建一个自定义可绘制rounded_dialog.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white"/>
<corners android:topLeftRadius="16dp"
android:topRightRadius="16dp"/>


</shape>

然后在styles.xml上使用可绘制对象作为背景覆盖bottomSheetDialogTheme:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>


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


<style name="AppModalStyle"
parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/rounded_dialog</item>
</style>

这将改变你的应用程序的所有底部对话框。

小开
    创建一个可绘制的形状。我们将使用作为底稿的背景。 为左上角和右下角的半径提供适当的值。< / p > 
    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="24dp"
android:topRightRadius="24dp" />
<padding android:top="2dp" />
<solid android:color="@color/white" />
</shape>

  1. Now create style for " Bottom sheet dialog fragment "

    <style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/drawable_bottomsheet_background</item>
</style>


<style name="BaseBottomSheetDialog" parent="@style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">@style/BottomSheet</item>
</style>


<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />

  2. Now create a custom class that will extend BottomSheetDilogFragment ,where you provide your style . 

    open class CustomRoundBottomSheet : BottomSheetDialogFragment() {


override fun getTheme(): Int = R.style.BottomSheetDialogTheme


override fun onCreateDialog(savedInstanceState: Bundle?): Dialog = BottomSheetDialog(requireContext(), theme)


}

  3. Now use this class wherever you want to have round corner bottom sheet . eg 

    class BottomSheetSuccess : CustomRoundBottomSheet() {


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




override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
}


}
小开

你必须改变bottom sheet theme来实现顶部圆形布局

创建一个自定义绘制background_bottom_sheet_dialog_fragment.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<padding android:top="0dp" />
<solid android:color="@color/white" />
</shape>

然后在styles.xml上使用drawable作为背景覆盖bottomSheetDialogTheme:

<!--Bottom sheet-->
<style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
<item
name="android:background">@drawable/background_bottom_sheet_dialog_fragment
</item>
</style>


<style name="BaseBottomSheetDialog"
parent="@style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">@style/BottomSheet</item>
</style>


<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />

这将改变你的底页的背景布局

BottomSheetDialog

class SheetFragment() : BottomSheetDialogFragment() {


lateinit var binding: SheetFragmentBinding;


override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog;
val view = View.inflate(context, R.layout.fragment_bottom_sheet, null);


binding = DataBindingUtil.bind(view)!!;
binding.viewModel = SheetFragmentVM();


dialog.setContentView(view);


var bottomSheetBehavior = BottomSheetBehavior.from(view.parent as View);
bottomSheetBehavior.setPeekHeight(BottomSheetBehavior.PEEK_HEIGHT_AUTO);


bottomSheetBehavior.setBottomSheetCallback(object :
BottomSheetBehavior.BottomSheetCallback() {
override fun onStateChanged(bottomSheet: View, newState: Int) {
if (BottomSheetBehavior.STATE_EXPANDED == newState) {
// do on STATE_EXPANDED
}
if (BottomSheetBehavior.STATE_COLLAPSED == newState) {
// do on STATE_COLLAPSED
}


if (BottomSheetBehavior.STATE_HIDDEN == newState) {
dismiss()


}
}


override fun onSlide(bottomSheet: View, slideOffset: Float) {
// do on slide
}
})


return dialog
}
小开

创建一个名为rounded_corners_shape的形状

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


</shape>

定义一个样式

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


<style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/rounded_corners_shape</item>
</style>

在你的自定义BottomSheetDialogFragment上使用这种风格，它会工作的!

 public class CustomDialogFragment extends BottomSheetDialogFragment {
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(STYLE_NORMAL, R.style. AppBottomSheetDialogTheme);
}


...
}
小开

有了新的材料成分库，你可以在你的样式中使用shapeAppearanceOverlay属性来自定义形状你的组件(注意:它至少需要版本1.1.0)

只需要使用BottomSheetDialogFragment覆盖onCreateView方法，然后为Bottom Sheet对话框定义自定义样式。

在应用主题的styles.xml中定义bottomSheetDialogTheme属性:

  <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
....
<item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialog</item>
</style>

然后用shapeAppearanceOverlay定义你最喜欢的形状

  <style name="CustomBottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">@style/CustomBottomSheet</item>
</style>


<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
</style>


<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>

enter image description here

你可以在你的BottomSheetDialogFragment中获得重写此方法的相同行为(而不是在你的应用主题中添加bottomSheetDialogTheme):

@Override public int getTheme() {
return R.style.CustomBottomSheetDialog;
}

在这种情况下，你只在单个BottomSheetDialogFragment中使用这个themeOverlay，而不是在所有应用程序中。

关于扩展状态:

在展开状态下，BottomSheet 有平角 .;你可以在github回购中查看官方注释:

我们的设计团队坚持认为圆角表示可滚动内容，而平角表示没有额外的内容。因此，他们不希望我们用fitToContents添加这个更改。

此行为由BottomSheetBehavior提供，不可能覆盖它。
然而，有一个变通办法>免责声明:它可以停止工作在下一个版本!!< / p >

你可以在BottomSheetDialogFragment中添加一个BottomSheetCallback:

  @NonNull @Override public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
Dialog dialog = super.onCreateDialog(savedInstanceState);




((BottomSheetDialog)dialog).getBehavior().addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {


@Override public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_EXPANDED) {
//In the EXPANDED STATE apply a new MaterialShapeDrawable with rounded cornes
MaterialShapeDrawable newMaterialShapeDrawable = createMaterialShapeDrawable(bottomSheet);
ViewCompat.setBackground(bottomSheet, newMaterialShapeDrawable);
}
}


@Override public void onSlide(@NonNull View bottomSheet, float slideOffset) {


}
});


return dialog;
}


@NotNull private MaterialShapeDrawable createMaterialShapeDrawable(@NonNull View bottomSheet) {
ShapeAppearanceModel shapeAppearanceModel =


//Create a ShapeAppearanceModel with the same shapeAppearanceOverlay used in the style
ShapeAppearanceModel.builder(getContext(), 0, R.style.CustomShapeAppearanceBottomSheetDialog)
.build();


//Create a new MaterialShapeDrawable (you can't use the original MaterialShapeDrawable in the BottoSheet)
MaterialShapeDrawable currentMaterialShapeDrawable = (MaterialShapeDrawable) bottomSheet.getBackground();
MaterialShapeDrawable newMaterialShapeDrawable = new MaterialShapeDrawable((shapeAppearanceModel));
//Copy the attributes in the new MaterialShapeDrawable
newMaterialShapeDrawable.initializeElevationOverlay(getContext());
newMaterialShapeDrawable.setFillColor(currentMaterialShapeDrawable.getFillColor());
newMaterialShapeDrawable.setTintList(currentMaterialShapeDrawable.getTintList());
newMaterialShapeDrawable.setElevation(currentMaterialShapeDrawable.getElevation());
newMaterialShapeDrawable.setStrokeWidth(currentMaterialShapeDrawable.getStrokeWidth());
newMaterialShapeDrawable.setStrokeColor(currentMaterialShapeDrawable.getStrokeColor());
return newMaterialShapeDrawable;
}
小开

如果你使用最后一个版本的材料组件，你只需要覆盖ShapeAppearance.MaterialComponents.LargeComponent(因为底部表格使用这种形状)，并设置你想要的值:

 <style name="ShapeAppearance.YourApp.LargeComponent" parent="ShapeAppearance.MaterialComponents.LargeComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">12dp</item>
</style>

然后设置你的应用样式:

<item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.YourApp.LargeComponent</item>

Gabriele Mariotti的解决方案类似，也可以工作，但这个更简单。

小开

我知道这个问题已经有了一个公认的答案。我想要记录我经历的问题，以及我最终是如何让它工作的，这样它对未来的人是有用的。

首先，我使用Theme.AppCompat.Light.DarkActionBar作为我们的AppTheme的父类。这意味着@Gabriele Mariotti解决方案不断崩溃，错误Could not inflate Behavior subclass com.google.android.material.bottomsheet.BottomSheetBehavior。我通过简单地将父类更改为Theme.MaterialComponents.Light.DarkActionBar来解决这个问题。这并没有影响我们的主题，但RTE已经消失了。您还可以通过简单地将require项包含到样式中来解决这个问题。但是我没有费心去弄清楚BottomSheetBehavior需要哪些样式。

其次，尝试我可能，但我不能得到实际的框架布局(这是BottomSheetDialogFragment)使用圆角。我意识到将此设置为图像Drawable工作，但不适用于形状或@null。事实证明，这是因为我正在使用的LinearLayout已经定义了一个背景。这覆盖了样式中的任何背景。去掉它最终会产生圆角。

此外，我不需要设置任何背景形状来圆角。@Gabriele Mariotti的解决方案在我做出上述更改后立即起作用。然而，为了设置我想要的背景色，我必须覆盖“backgroundTint”项。

PS:我是Android开发的新手，我正在维护一个旧的应用程序，这是我们学院内部使用的。我不是很熟悉Android的布局系统或材料库。我想这就是为什么我花了3天时间才弄明白。我希望这对将来的人有用。

小开

这对我很管用。

创建一个背景绘图(例如命名为shape_rounded_dialog):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">


<solid android:color="@color/color_white" />
<corners android:topLeftRadius="16dp"
android:topRightRadius="16dp" />
</shape>

添加下面的样式:

<style name="AppBottomSheetDialogTheme"
parent="Theme.MaterialComponents.Light.BottomSheetDialog">


<item name="bottomSheetStyle">@style/CustomBottomSheetStyle</item>
</style>


<style name="CustomBottomSheetStyle"
parent="Widget.Design.BottomSheet.Modal">


<item name="android:background">@drawable/shape_rounded_dialog</item>
</style>

在你的DialogFragment中，重写方法getTheme()来返回你的样式。

@Override
public int getTheme() {
return R.style.AppBottomSheetDialogTheme;
}
小开

添加圆角形状，使其为你的根布局的背景

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="@dimen/padding_margin_16_dp"
android:topRightRadius="@dimen/padding_margin_16_dp" />
<solid android:color="@color/white" />
</shape>

在你的BottomSheetDialogFragment上使背景透明

override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
(view?.parent as View).setBackgroundColor(Color.TRANSPARENT)
}

它的工作为约束布局，框架布局，线性布局，相对布局。

小开

完整的解决方案:

将下面的样式属性添加到style.xml。

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


<style name="AppModalStyle"
parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/bottom_sheet_background</item>
</style>

然后使用AppBottomSheetDialogTheme从你的代码创建一个bottom sheet对话框。

private fun openBottomSheetTermsCondition() {
val mBottomSheetDialog = BottomSheetDialog(requireContext(),R.style.AppBottomSheetDialogTheme)
val sheetView = layoutInflater.inflate(R.layout.bottom_sheet_travel_advice_terms, null)
mBottomSheetDialog.setContentView(sheetView)
sheetView.tv_head.setOnClickListener {
mBottomSheetDialog.dismiss()
}


sheetView.webView.loadDataWithBaseURL(null,getString(R.string.privacy_policy_body_html),"text/html", "utf-8", null)
mBottomSheetDialog.show()
}

我使用下面的绘图来圆底稿背景。

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="@dimen/bottom_sheet_corner_radius"
android:topRightRadius="@dimen/bottom_sheet_corner_radius" />
<solid android:color="@color/white" />
</shape>

底部表格xml

    <?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_hideable="false"
app:behavior_peekHeight="@dimen/bottom_sheet_peek_height"
app:cardCornerRadius="@dimen/spacing_normal"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">


<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/spacing_small">


<androidx.constraintlayout.widget.Guideline
android:id="@+id/begin_horizontal_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="@dimen/activity_vertical_margin" />


<androidx.constraintlayout.widget.Guideline
android:id="@+id/begin_vertical_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="@dimen/activity_horizontal_margin" />


<androidx.constraintlayout.widget.Guideline
android:id="@+id/end_vertical_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="@dimen/activity_horizontal_margin" />


<View
android:id="@+id/sheet_header_shadow"
android:layout_width="match_parent"
android:layout_height="@dimen/spacing_tiny"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:background="@drawable/bottom_sheet_header_shadow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/tv_head"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:drawablePadding="@dimen/spacing_normal"
android:fontFamily="sans-serif-medium"
android:gravity="start"
android:padding="@dimen/spacing_small"
android:text="@string/term_and_condition"
android:textColor="@color/greyish_brown"
android:textSize="20sp"
app:drawableLeftCompat="@drawable/ic_close_black_24dp"
app:layout_constraintEnd_toEndOf="@id/end_vertical_guideline"
app:layout_constraintStart_toStartOf="@id/begin_vertical_guideline"
app:layout_constraintTop_toBottomOf="@+id/begin_horizontal_guideline" />


<View
android:id="@+id/line_separation"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="@dimen/spacing_small"
android:background="@color/blue_gray"
app:layout_constraintTop_toBottomOf="@+id/tv_head" />


<WebView
android:id="@+id/webView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="@id/end_vertical_guideline"
app:layout_constraintStart_toStartOf="@id/begin_vertical_guideline"
app:layout_constraintTop_toBottomOf="@id/line_separation" />


</androidx.constraintlayout.widget.ConstraintLayout>


</androidx.cardview.widget.CardView>
小开

简单的解决方案:

class TopRoundedCornersFragment : BottomSheetDialogFragment() {


override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)


setStyle(STYLE_NORMAL, R.style.AppBottomSheetDialogTheme)
}
}

在styles.xml

<style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/bottom_sheet_dialog_bg</item>
</style>


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

最后，创建一个顶部圆角可绘制资源(bottom_sheet_dialog_bg.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">


<solid android:color="@android:color/white" />
<corners
android:topLeftRadius="4dp"
android:topRightRadius="4dp" />


</shape>
小开

setupDialog()是RestrictedApi。最简单的解决方案，工作在material:1.3.0-beta01不涉及主题:

res/drawable/bs_background:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="16dp"
android:topRightRadius="16dp" />
<solid android:color="@color/dayNightBackground" />
</shape>

public class MyBsDialogFrag extends BottomSheetDialogFragment {


@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
((View) view.getParent()).setBackgroundResource(R.drawable.bs_background);
}


}
小开

底页对话框具有弯曲的形状和偷看高度

    <!-- BottomSheet Dialog -->
<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/CustomBottomSheet</item>


</style>




<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
<item name="behavior_peekHeight">420dp</item>
</style>


<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">20dp</item>
<item name="cornerSizeTopLeft">20dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>


</style>
小开

如果你需要setFitContents=true，我尝试了通过勾onStateChanged的解决方案，但一旦对话框达到EXPANDED状态，它就会从直角闪烁到圆角。这很烦人。

有一种替代的解决方案，它不会导致闪烁，不需要使用私有api，而且更易于阅读(恕我冒犯)。

查看BottomSheetBehavior的代码，我们发现:

  /** True if Behavior has a non-null value for the @shapeAppearance attribute */
private boolean shapeThemingEnabled;

事实证明，如果形状主题被禁用，MaterialShapeDrawable将不会被使用。我们在BottomSheetBehavior.onLayout()中找到了这个:

// Only set MaterialShapeDrawable as background if shapeTheming is enabled, otherwise will
// default to android:background declared in styles or layout.
if (shapeThemingEnabled && materialShapeDrawable != null) {
ViewCompat.setBackground(child, materialShapeDrawable);
}

默认为android:background正是我们所需要的，因为这意味着完全控制如何渲染背景。

我们可以通过创建一个单独的样式并将shapeAppearance和shapeAppearanceOverlay设置为null来禁用材质主题:

<style name="Theme.YourApp.NoShapeBottomSheetDialog" parent="Theme.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">@style/Theme.YourApp.NoShapeButtonSheet</item>
</style>


<style name="Theme.YourApp.NoShapeButtonSheet" parent="Widget.MaterialComponents.BottomSheet.Modal">
<item name="shapeAppearance">@null</item>
<item name="shapeAppearanceOverlay">@null</item>
</style>

扩展BottomSheetDialogFragment并覆盖onCreateDialog:

public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
return new BottomSheetDialog(requireContext(),
R.style.Theme_Grupin_NoShapeBottomSheetDialog);
}

下面的表格现在是裸露的，没有任何背景。所以我们可以添加任何我们想要的背景，没有动画将被触发。

小开

步骤1:

创建名为rounded_background.xml的res/drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="32dp"
android:topRightRadius="32dp" />
<solid android:color="#D81B60" />
</shape>

步骤2:

创建这个样式来删除对话框背景:

<style name="NoBackgroundDialogTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="android:windowBackground">@null</item>
</style>

步骤3:

使用setBackgroundResource() &将可绘制对象设置为对话框的根视图;通过重写getTheme()方法设置样式

Java:

public class MyDialogFragment extends BottomSheetDialogFragment {


@Override
public int getTheme() {
return R.style.NoBackgroundDialogTheme;
}


@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {


View view = View.inflate(requireContext(), R.layout.bottom_sheet_profile, null);
view.setBackgroundResource(R.drawable.rounded_background);
return view;


}
}

芬兰湾的科特林:

class MyDialogFragment : BottomSheetDialogFragment() {


override fun getTheme() = R.style.NoBackgroundDialogTheme


override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {


val view: View = View.inflate(requireContext(), R.layout.bottom_sheet_profile, null)
view.setBackgroundResource(R.drawable.rounded_background)
return view
}


}

结果:

enter image description here

如果(view.setBackgroundResource(R.drawable.rounded_background))这一行不能工作，然后尝试设置片段的Xml格式的背景。

小开

正如在其他答案中指出的那样，当state为BottomSheetBehavior.STATE_EXPANDED时，角将被压平。

你可以通过设置BottomSheetBehavior的peekHeight属性并使用自定义样式来克服这个问题。

abstract class BaseBottomSheetFragment : BottomSheetDialogFragment(){


override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    

if (state == BottomSheetBehavior.STATE_EXPANDED) {
val displayMetrics = DisplayMetrics()
requireActivity().windowManager!!.defaultDisplay!!.getMetrics(displayMetrics)
(dialog as BottomSheetDialog).behavior.peekHeight = displayMetrics.heightPixels
} else {
(dialog as BottomSheetDialog).behavior.state = state
}
}


override fun getTheme(): Int {
return R.style.CustomBottomSheetDialog
}
}

CustomBottomSheetDialog风格

<style name="CustomBottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">@style/CustomBottomSheet</item>
<item name="materialButtonStyle">@style/CustomMaterialButtonStyle</item>
</style>


<style name="CustomMaterialButtonStyle" parent="@style/Widget.MaterialComponents.Button">
<item name="cornerRadius">@dimen/dialog_bottom_radius</item>
</style>


<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
</style>


<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
<item name="android:background">@android:color/transparent</item>
<item name="backgroundTint">@android:color/transparent</item>
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">@dimen/dialog_bottom_radius</item>
<item name="cornerSizeTopLeft">@dimen/dialog_bottom_radius</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
小开

最简单和最干净的解决方案，对我来说，是把以下4行放在我的片段类的onViewCreated(View View, Bundle savedInstanceState)方法中:

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
View bottomSheet = (View) view.getParent();
bottomSheet.setBackgroundTintMode(PorterDuff.Mode.CLEAR);
bottomSheet.setBackgroundTintList(ColorStateList.valueOf(Color.TRANSPARENT));
bottomSheet.setBackgroundColor(Color.TRANSPARENT);
}

这将允许您的自定义绘制圆角，以正确显示一旦设置为您的片段布局的顶层视图的背景。

本质上，这将覆盖默认的BottomSheetFragment属性关于颜色，tintMode和tintList。

使用它，就不需要打乱样式资源。

小开
首先，你应该创建一个可绘制的XML文件，其中包含一个顶部圆角的形状，命名任何你想要的。 我将其命名为bottom rounded_top_shape.xml

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

然后在style.xml中添加这个

<style name="AppBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>


<style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/rounded_top_shape</item>
</style>

然后在你的应用主题中添加如下所示的行

 <style name="MyAppTheme" parent="Theme.MaterialComponents.Light.Bridge">
<!-- this line -->
<item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>
小开

在STATE_EXPANDED上禁用圆角平化的短解决方案:

@SuppressLint("RestrictedApi")
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val dialog = super.onCreateDialog(savedInstanceState)
    

//Disable animator that flats the rounded corners
(dialog as BottomSheetDialog).behavior.disableShapeAnimations()


return dialog
}
小开

如果你正在使用材质组件主题，你可以通过将背景颜色设置为透明，然后将布局的背景设置为四舍五入来覆盖BottomSheetDialog的默认行为。

    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Customize your theme here. -->
<item name="bottomSheetDialogTheme">@style/BottomSheetDialog</item>
</style>


<style name="BottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>


<style name="bottomSheetStyleWrapper" parent="Widget.MaterialComponents.BottomSheet.Modal">
<item name="android:backgroundTint">@android:color/transparent</item>
</style>

rounded_corner.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="26dp"
android:topRightRadius="26dp"/>


</shape>

然后将形状应用到你的底部表格根布局的背景:

<?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:background="@drawable/rounded_corner">


<!--
other layout components
-->


</LinearLayout>

请注意,如果你有组件，如Webview在底页布局，你可能无法实现圆角预期，因为Webview有一个默认的白色背景。在这种情况下，你可以像这样简单地删除背景:

webView.setBackgroundColor(0);
小开
我找到了简单的解决方法。 使用com.google.android.material:material:1.6.1

class MyBottomSheet: BottomSheetDialogFragment() {
    

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
disableShapeAnimation()
}
    

@SuppressLint("RestrictedApi", "VisibleForTests")
private fun disableShapeAnimation() {
try {
val dlg = dialog as BottomSheetDialog
dlg.behavior.disableShapeAnimations()
} catch (ex: Exception) {
Log.e("BaseBottomSheet", "disableShapeAnimation Exception:", ex)
}
}
}

提交答案