底部弹出窗口按钮自定义样式不起作用

Question

在我的BottomSheetDialogFragment中，我有一个按钮，我想让这个按钮的背景成为圆角矩形，并有一条灰色边框。

这是我的圆角背景drawable "rounded_tranparent_background.xml":

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#FFF" />
<stroke
    android:width="1dp"
    android:color="#8A8383" />
<corners
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />
 </shape>

我将这个背景应用到了我的底部面板按钮中。

这是底部面板的布局代码：

<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">


<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btnFollowUnfollow"
        android:background="@drawable/rounded_tranparent_background"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/avenir_next_ltpro_medium"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="Unfollow"
        android:textColor="@color/colorGreyDark"
        app:layout_constraintBaseline_toBaselineOf="@+id/tvTitle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.71"
        app:layout_constraintStart_toEndOf="@+id/tvTitle" />

    //...other code...

 </androidx.constraintlayout.widget.ConstraintLayout>

 </layout>

这是我底部对话框的样式

<style name="AppBottomSheetDialogTheme"
    parent="Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="colorPrimary">@color/colorBlue</item>
    <item name="colorPrimaryDark">@color/colorBlueDark</item>
    <item name="colorAccent">@android:color/transparent</item>
</style>

应用了所有的代码后，我仍然无法获得我想要的设计。 我想要的设计是：，而我现在得到的是。如何才能在底部弹窗对话框中实现自定义按钮设计？

- Md Jubayer

---

为什么你在使用 <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> ，而不是只使用 topLeft 和 topRight。 - Mustafo aka Shokhrukh Makmudov

此外，您可以为“关闭”使用自定义UI。在您的ViewObject（close）下方使用View。将背景颜色设置为黑色，它将类似于上面的示例。 - Mustafo aka Shokhrukh Makmudov

你正在使用Material Components库吗？ - Gabriele Mariotti

Answer 1

您可以使用一个简单的MaterialButton:

        <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cornerRadius="10dp"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:textColor="..."
            app:strokeColor="..."/>

- Gabriele Mariotti

---

一个关键点是小部件主题定义在应用程序主题中全局设置，但BottomSheetDialogFragment会忽略它们，因此我们必须在小部件的xml定义中显式地设置所需的主题（就像答案中所示）。 - YUSMLE

Answer 2

这个修复方法对我有效：

<Button        
    android:background="@drawable/rounded_tranparent_background"
    ...

同时添加"android:backgroundTint"和app:backgroundTint:

<Button        
    android:background="@drawable/rounded_tranparent_background"
    android:backgroundTint="@null"
    app:backgroundTint="@null"
    ...

此外，我的按钮主题定义在BottomSheetDialogFragment中被忽略了。

<-- Themes.xml -->
<style>
    <item name="materialButtonStyle">MyButtonStyle</item>

<!-- So quick fix: -->
<Button        
     android:background="@drawable/rounded_tranparent_background"
     android:theme="@style/MyButtonStyle"

- Peter Nemeckay

Answer 3

例如，您可以为按钮使用自定义的可绘制对象。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tools:ignore="ResourceName">
    <solid android:color="@color/inside_color" />

    <stroke
        android:color="@color/border_color"
        android:width="3px" />
    <corners android:radius="16dp" />

</shape>

输出结果将类似于这样

- Mustafo aka Shokhrukh Makmudov

---

如果您检查我的问题，这部分代码已经存在。我认为问题在bottomSheetDialogFragment后面。 - Md Jubayer

很遗憾，兄弟，你没有编写这段代码或者你没有上传它。我没有看到你的drawable。相反，你正在使用style = "btnFollowUnFollow"。你应该只使用其中一个，而不是两个。它不像你说的那样工作。将style更改为drawable，然后按钮就会改变。 - Mustafo aka Shokhrukh Makmudov

请仔细检查问题的开头部分，我不知道我的代码与你的有何不同...... - Md Jubayer

Answer 4

看起来 BottomSheetFragment 覆盖了你当前的主题，所以你必须在 Button 内添加这行代码。对我有用。

<Button         
android:theme="@style/Theme.YOURTHEME"
/>

- Petar Barac