BottomSheetDialogFragment 的圆角

Question

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

这是我的自定义 class，它使我想要从底部出现的布局膨胀

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

因为它覆盖了 BottomSheetDialog 的默认背景，所以我的 Bottom View 上方不会有任何半透明的灰色。

Answer 1

我今天检查了同样的东西，是的，你是对的，遵循代码

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

这适用于片段背景，因此您应该从对话框 window 获取底页视图并在此处更改背景是代码

 @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);
    }

此处 bottomsheet 是您要更改的实际视图。

Answer 2

解决此问题的另一种方法是扩展 BottomSheetDialog 并创建适合您需要的自定义 class。您可以对布局 xml 文件执行相同的操作，并添加背景或任何其他所需的自定义设置。这还有一个好处，就是在更改背景时，您不会依赖于 Android(android.support.design.R.id.design_bottom_sheet) 使用的 id 名称（尽管 id 名称的更改很少发生 AFAIK）。

Answer 3

Koma Yip from 的回答对我有用，你应该试试。

Create a xml in drawable , say 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 根节点：

set it as the background in your layout xml
android:background="@drawable/dialog_bg"

并在 onCreateView() 中输入：

set the background of your dialog to transparent
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

Answer 4

在 BottomsheetDialogFragment 中添加这两个方法 class。

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 class 的 setupDialog() 方法中调用 setDialogBorder(dialog) 方法 class。

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

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

完成！！

Answer 5

创建一个带圆角的自定义可绘制对象并将其设置为 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 class

@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);

Answer 6

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();

Answer 7

此答案仅针对在为布局设置具有圆形背景的可绘制对象后将背景颜色设置为 Color.TRANSPARENT 的问题。

None 的答案对我有用，可以将背景颜色设置为 Color.TRANSPARENT 除了覆盖 setupDialog() 解决方案：

@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 在 [=18= 中膨胀时].它打破了标准流程，因此可能会出现问题，例如您无法在 onViewCreated()

中使用 View Bindings - Kotlin Android Extensions

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

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

希望对遇到同样问题的朋友有所帮助

Answer 8

创建自定义可绘制对象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>

这将更改您应用的所有 BottomSheetDialog。

Answer 9

创建一个可绘制的形状 .. 我们将用作底部的背景 sheet。为左上角和右上角的半径提供适当的值。

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

现在为“底部 sheet 对话框片段”创建样式

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

现在创建一个自定义 class，它将扩展 BottomSheetDilogFragment，您可以在其中提供您的样式。

open class CustomRoundBottomSheet : BottomSheetDialogFragment() {

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

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

}

现在在任何你想要圆角底部的地方使用这个 class sheet 。例如

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

}

Answer 10

你必须改变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 上的 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" />

这将更改底部的背景布局sheet

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
}

Answer 11

创建一个名为 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);
      }

      ...
    }

Answer 12

您的组件的新 Material Component library you can customize the shape 使用样式中的 shapeAppearanceOverlay 属性（注意：它至少需要版本 1.1.0)

只需使用 BottomSheetDialogFragment 覆盖 onCreateView 方法，然后为底部 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>

您可以在 BottomSheetDialogFragment 中覆盖此方法获得相同的行为（而不是在您的应用主题中添加 bottomSheetDialogTheme）：

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

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

关于扩展状态的重要说明：

在展开状态下，底部Sheet 有平角。可以在github repo查看官方评论：

Our design team is strongly opinionated that rounded corners indicate scrollable content while flat corners indicate that there is no additional content. As such, they do no want us to add this change with fitToContents.

此行为由 BottomSheetBehavior 提供，无法覆盖它。
但是有一个解决方法 -> 免责声明： 它可以在下一个版本中停止工作!!

您可以在 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;
  }

Answer 13

如果您使用 last version of material component，您只需覆盖 ShapeAppearance.MaterialComponents.LargeComponent（因为底部 sheet 使用此形状）并设置您想要的值，例如：

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

类似并且也可以工作，但是这个更简单。

Answer 14

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

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

其次，尽我所能尝试，但我无法获得用于圆角的实际框架布局（即 BottomSheetDialogFragment）。我意识到将其设置为图像 Drawable 有效，但不适用于形状或 @null。事实证明，这是因为我使用的 LinearLayout 定义了背景。这覆盖了样式中的任何背景。删除最终导致圆角。

此外，我不需要将任何背景形状设置为圆角。 @Gabriele Mariotti 的解决方案在我进行上述更改后立即生效。但是，要设置我想要的背景颜色，我必须覆盖 "backgroundTint" 项。

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

Answer 15

这对我有用。

创建背景可绘制对象（例如命名为 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() 重写为 return 您的风格。

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

Answer 16

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

<?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)
}

它适用于约束布局、框架布局、线性布局、相对布局。

Answer 17

完整的解决方案：

将以下样式属性添加到 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 从您的代码创建底部 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()
}

我使用下面的 drawable 来圆底 sheet 背景。

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

底部sheetxmlbottom_sheet_travel_advice_terms.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>

Answer 18

简单的解决方案：

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>

Answer 19

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);
  }

}

Answer 20

底部 Sheet 具有弯曲形状和窥视高度的对话框

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

Answer 21

如果你需要 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 设置为空来禁用 material 主题：

<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);
}

底部sheet现在是裸体的，完全没有任何背景。所以我们可以添加任何我们想要的背景，不会再触发动画了。

Answer 22

第 1 步：

创建一个 res/drawable 命名为 rounded_background.xml :

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

}

结果：

if( view.setBackgroundResource(R.drawable.rounded_background)) 这条线不起作用然后尝试设置片段的 Xml 格式的背景。

Answer 23

正如其他答案所指出的，当状态为 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>

Answer 24

对我有用的最简单和最干净的解决方案是将以下 4 行放在我的片段 class 的 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);
}

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

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

有了这个，就不用乱动样式资源了。

Answer 25

首先，您应该创建一个可绘制的 xml 文件，其中包含一个带有顶部圆角的形状，任意命名。我把它命名为底部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>

Answer 26

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

BottomSheetDialogFragment 的圆角

Round corner for BottomSheetDialogFragment

android

material-design

bottom-sheet

material-components

material-components-android