MaterialComponents 主题警报对话框按钮

Question

最近我从支持库切换到 com.google.android.material:material:1.0.0

但现在我遇到了一个问题，在这个页面中有一个注释 https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md

Note: Using a Material Components theme enables a custom view inflater which replaces default components with their Material counterparts. Currently, this only replaces Button XML components with MaterialButton.

以及我正在使用的主题

Theme.MaterialComponents.Light.NoActionBar

完全按照注释中的说明进行操作，它将 AlertDialog 按钮替换为 MaterialButtons，但问题是默认情况下 MaterialButtons 是彩色背景，现在按钮看起来像这样：

如何让它们再次无边框和无背景？

PS 我正在使用警报生成器创建警报对话框：

android.app.AlertDialog.Builder

Answer 1

我知道是什么导致了这个问题。我需要使用不同的 AlertDialog class:

androidx.appcompat.app.AlertDialog

当我切换到这个时，一切都按预期开始工作。这是我找到解决方案的地方：

https://github.com/material-components/material-components-android/issues/162

Answer 2

在此处使用 MaterialComponents 找到了另一个解决方案：https://issuetracker.google.com/issues/116861837#comment9

<style name="Theme.Custom.Material.Alert.Dialog.Light" parent="Theme.MaterialComponents.Light.Dialog.Alert">
    <item name="materialButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>
</style>

<style name="Theme.Custom.Material.Base.Light" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="android:dialogTheme">@style/Theme.Custom.Material.Alert.Dialog.Light</item>
    <item name="android:alertDialogTheme">@style/Theme.Custom.Material.Alert.Dialog.Light</item>
  ....
</style>

虽然对我来说还不是"intended behavior"。

Answer 3

当使用 com.google.android.material:material:1.0.0 和 androidx.appcompat.app.AlertDialog 时，您可以使用 Widget.MaterialComponents.Button.TextButton 作为父级自定义 buttonBar 中的每个按钮。

val builder: AlertDialog.Builder = AlertDialog.Builder(ContextThemeWrapper(context, R.style.AlertDialogTheme))

使用默认布局或通过 builder.setView(R.layout.my_dialog)

添加自定义布局

你的风格：

<style name="AlertDialogTheme" parent="Theme.MaterialComponents.Light.Dialog.Alert">
    <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
    <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Neutral</item>
    <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>
</style>

<style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="backgroundTint">@color/transparent</item>
    <item name="rippleColor">@color/colorAccent</item>
    <item name="android:textColor">@color/colorPrimary</item>
    <item name="android:textSize">14sp</item>
    <item name="android:textAllCaps">false</item>
</style>

<style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="backgroundTint">@color/transparent</item>
    <item name="rippleColor">@color/colorAccent</item>
    <item name="android:textColor">@color/gray_dark</item>
    <item name="android:textSize">14sp</item>
</style>

Answer 4

如果您使用的是 com.android.support:design:28.0.0 库，则使用 android.support.v7.app.AlertDialog 可以正常工作。

Answer 5

如果你不想使用androidx.appcompat.app.AlertDialog，你可以重新定义对话框按钮的样式：

在你的 style.xml 中：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   ...
   <item name="android:buttonBarButtonStyle">@style/DialogButton</item>
   ...
</style>

<style name="DialogButton" parent="Widget.MaterialComponents.Button.TextButton"/>

Answer 6

如果您使用 Material 组件库，获得 AlertDialog 的最佳方法是使用 MaterialAlertDialogBuilder.

new MaterialAlertDialogBuilder(context)
            .setTitle("Dialog")
            .setMessage("Lorem ipsum dolor ....")
            .setPositiveButton("Ok", /* listener = */ null)
            .setNegativeButton("Cancel", /* listener = */ null)
            .show();

这是默认结果：

如果您还想对按钮应用不同的样式或颜色，您可以选中此 answer。

Answer 7

首先，如果您使用Material Theme，最好使用use MaterialAlertDialog。

您可以在此处阅读更多内容 – Material.io → Theming dialogs

MaterialAlertDialogBuilder(context)
            .setTitle(R.string.confirm)
            .setMessage(R.string.logout)
            .setPositiveButton(R.string.logout_alert_positive) { _, _ -> activity?.logout() }
            .setNegativeButton(R.string.never_mind, null)
            .show()

This 是 MaterialAlertDialog 操作的 layout.xml。如您所见，有 3 个按钮，每个按钮都有自己的样式。因此，您可以通过以下方式更改它们。

第 1 步： 告诉 Android 您想要更改默认的 MaterialAlertDialog 主题。

<style name="Base.AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    <item name="materialAlertDialogTheme">@style/AlertDialog</item>
    ...
</style>

第 2 步： 告诉 Android 您想要更改特定的按钮样式。 buttonBarNeutralButtonStyle、buttonBarNegativeButtonStyle 或 buttonBarPositiveButtonStyle

<style name="AlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
</style>

第 3 步： 定义您的自定义样式

<style name="NegativeButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textColor">#FF0000</item>
</style>

Answer 8

我测试了上面的答案。虽然我有一个好主意，但 none 对我的情况很有效。所以，这就是我的答案。

确保清单文件中的应用程序或 Activity.

android:theme="@style/AppMaterialTheme"

打开您的 Styles.xml 文件并根据以下内容进行更改。

<style name="AppMaterialTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">@color/primaryBlue</item>
    <item name="colorPrimaryDark">@color/primaryBlue</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlActivated">@color/primaryBlue</item>
    <item name="colorControlHighlight">@color/colorAccent_main</item>
    <item name="colorButtonNormal">@color/white</item>

    <item name="materialAlertDialogTheme">@style/AlertDialogMaterialTheme</item>
</style>

<style name="AlertDialogMaterialTheme" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
    <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Negative</item>
</style>

<style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    <item name="android:fillColor">@color/color_0054BB</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
    <item name="rippleColor">@color/colorAccent_main</item>
</style>

<style name="Alert.Button.Negative" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="strokeColor">@color/color_0054BB</item>
    <item name="android:textColor">@color/color_0054BB</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
    <item name="android:layout_marginEnd">8dp</item>
    <item name="rippleColor">@color/colorAccent_main</item>
</style>

您不需要将主题应用到 AlertDialog，因为您的 Activity 已将主题应用到它。所以，正常创建对话框。

结果会是。

MaterialComponents 主题警报对话框按钮

MaterialComponents theme alert dialog buttons

android

material-design

android-alertdialog

android-styles

material-components-android