MaterialComponents主题警告对话框按钮

ant*_*kas 49 android android-alertdialog android-styles material-design material-components-android

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

但是现在我有一个问题,在这个页面上有一个注释https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md

注意:使用"材质成分"主题可启用自定义视图填充程序,该填充程序将使用"材质"对应项替换默认组件.目前,这仅使用MaterialButton替换Button XML组件.

我正在使用的主题

Theme.MaterialComponents.Light.NoActionBar
Run Code Online (Sandbox Code Playgroud)

它完全按照它在说明中所说的,它将AlertDialog按钮替换为MaterialButtons,但问题是默认情况下MaterialButtons是彩色背景,现在按钮看起来像这样: 在此输入图像描述

我怎样才能让它们再次无边界和无背景?

PS我正在使用警报构建器来创建警报对话框:

android.app.AlertDialog.Builder
Run Code Online (Sandbox Code Playgroud)

ant*_*kas 64

我弄清楚导致这个问题的原因.我需要使用不同的AlertDialog类:

androidx.appcompat.app.AlertDialog
Run Code Online (Sandbox Code Playgroud)

当我切换到这一切时,一切都按预期开始工作.这是我找到解决方案的地方:

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

  • 我使用Android Studio的“迁移到AndroidX”选项/功能将代码迁移到androidx,但是此库未自动更新为AndroidX。当我按照答案提示手动更新导入时,此问题已解决 (2认同)

Rob*_*Rob 35

使用时com.google.android.material:material:1.0.0androidx.appcompat.app.AlertDialog您可以buttonBar使用Widget.MaterialComponents.Button.TextButton父项来自定义的每个按钮。

val builder: AlertDialog.Builder = AlertDialog.Builder(ContextThemeWrapper(context, R.style.AlertDialogTheme))
Run Code Online (Sandbox Code Playgroud)

使用默认布局或通过添加自定义 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>
Run Code Online (Sandbox Code Playgroud)

屏幕截图

  • 我希望我可以投票50次。我花了大约两个小时来尝试为愚蠢的对话框着色。请注意,您还应该改用`MaterialAlertDialogBu​​ilder`。 (4认同)
  • 我只是不确定您为什么将 textAllCaps 设置为 false。我通常会在对话框中看到它设置为 true(唯一的例外是来自谷歌的名为 Crane 的 Material Design 示例) (2认同)

Hes*_*sam 16

我测试了上面的答案。虽然我有一个好主意,但没有一个适合我的情况。所以,这就是我的答案。

  1. 确保android:theme="@style/AppMaterialTheme"在应用程序或活动下的清单文件中有。

  2. 打开您的 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>
    
    Run Code Online (Sandbox Code Playgroud)

  3. 您不需要将主题应用于 AlertDialog,因为您的 Activity 将主题应用于它。所以,正常创建对话框。

在此处输入图片说明

结果会是。

在此处输入图片说明


ars*_*ent 13

首先,它是更好地利用使用MaterialAlertDialog如果您使用的材料主题。

你可以在这里阅读更多——Material.io?主题对话框

在此处输入图片说明

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()
Run Code Online (Sandbox Code Playgroud)

 

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

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

<style name="Base.AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    <item name="materialAlertDialogTheme">@style/AlertDialog</item>
    ...
</style>
Run Code Online (Sandbox Code Playgroud)

第 2 步:告诉 Android 您要更改特定按钮样式。buttonBarNeutralButtonStyle,buttonBarNegativeButtonStylebuttonBarPositiveButtonStyle

<style name="AlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
</style>
Run Code Online (Sandbox Code Playgroud)

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

<style name="NegativeButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textColor">#FF0000</item>
</style>
Run Code Online (Sandbox Code Playgroud)


Gab*_*tti 10

如果您使用的是Material Components库,则最好的方法AlertDialog是使用MaterialAlertDialogBuilder

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

这是默认结果:

在此处输入图片说明


小智 6

在这里使用 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>
Run Code Online (Sandbox Code Playgroud)

尽管对我来说这仍然不是“预期行为”。


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

Run Code Online (Sandbox Code Playgroud)