Botones de diálogo de alerta de tema de MaterialComponents

81

Recientemente cambié de la biblioteca de soporte a com.google.android.material: material: 1.0.0

Pero ahora tengo un problema, en estas páginas hay una nota https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md

Nota: El uso de un tema de Componentes de material habilita un inflador de vista personalizado que reemplaza los componentes predeterminados con sus homólogos de Material. Actualmente, esto solo reemplaza los componentes Button XML con MaterialButton.

Y el tema que estoy usando 

Theme.MaterialComponents.Light.NoActionBar

hace exactamente lo que dice en esa nota, reemplaza AlertDialog Buttons a MaterialButtons pero el problema es que, por defecto, MaterialButtons tiene un fondo de color y ahora los botones se ven así: ingrese la descripción de la imagen aquí

¿Cómo puedo volver a hacerlos sin bordes y sin fondo?

PD: estoy usando el generador de alertas para crear diálogos de alerta:

android.app.AlertDialog.Builder
android  material-design  android-alertdialog  android-styles  material-components-android 
— antanas_sepikas
fuente
Puede usar el tema Bridge si desea el contenido del tema AppCompat con algunos estilos nuevos de Material UI, puede resolver su problema, consulte esta respuesta: stackoverflow.com/a/52401497/10271334
— Jeel Vankhede

Respuestas:

111

Descubrí qué estaba causando este problema. Necesito usar una clase diferente de AlertDialog:

androidx.appcompat.app.AlertDialog

Cuando cambié a esto, todo comenzó a funcionar como se esperaba. Aquí es donde encontré la solución:

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

— antanas_sepikas
fuente
2
Migré mi código a androidx usando la opción / función 'Migrar a AndroidX' de Android Studio, pero esta biblioteca no se actualizó a AndroidX automáticamente. Este problema para mí se resolvió cuando actualicé la importación manualmente como sugiere la respuesta
— sushrut619
1
¡Me salvas! ¡Gracias!
— Mateus
¡No todos los héroes usan capa!
— Dave o Grady
Poco antes de la medianoche, muchas gracias. Me ahorraste una hora de sueño.
— Nantoka
75

Al usar com.google.android.material:material:1.0.0y androidx.appcompat.app.AlertDialogpuede personalizar cada botón en el buttonBarusando Widget.MaterialComponents.Button.TextButtoncomo padre.

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

Utilice el diseño predeterminado o agregue uno personalizado builder.setView(R.layout.my_dialog)

En tus estilos:

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

Captura de pantalla

— Robar
fuente
1
Esto es lo que estaba buscando al intentar diseñar mis diálogos. Todas las respuestas que encontré no usaban AndroidX.
— LeonardoSibela
2
Simplemente no estoy seguro de por qué está configurando textAllCaps en falso. Por lo general veo establece en true en los cuadros de diálogo (la única excepción fue un diseño Material de ejemplo de Google llamado Grulla)
— LeonardoSibela
5
Ojalá pudiera votar esto 50 veces. Pasé como dos horas tratando de colorear diálogos estúpidos. Tenga en cuenta que también debe usar MaterialAlertDialogBuilderen su lugar.
— gMale
1
El comentario de @gMale me ahorró tiempo.
— funct7
1
¡Gracias, esto realmente ayudó!
— Grisgram
19

Si está utilizando la biblioteca de Componentes de materiales, la mejor forma de tener una AlertDialoges utilizar la extensión MaterialAlertDialogBuilder.

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

Es el resultado predeterminado:

ingrese la descripción de la imagen aquí

Si también desea aplicar un estilo o color diferente a los botones, puede verificar esta respuesta .

— Gabriele Mariotti
fuente
Reemplazar AlertDialog.Buildercon MaterialAlertDialogBuilderno cambió el color de los botones. Consulte las respuestas a continuación para cambiar el theme.
— CoolMind
@CoolMind La cuestión no es cómo cambiar el color del botón.
— Gabriele Mariotti
13

Probé las respuestas anteriores. Aunque tuve una buena idea, ninguna funcionó para mi caso. Entonces, esta es mi respuesta.

  1. Asegúrese de tener android:theme="@style/AppMaterialTheme"en su archivo de manifiesto en Aplicación o Actividad.

  2. Abra su archivo Styles.xml y cámbielo según lo siguiente.

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

  3. No necesitará aplicar el tema a su AlertDialog ya que su Actividad le aplica el tema. Entonces, cree el diálogo normalmente.

ingrese la descripción de la imagen aquí

El resultado será.

ingrese la descripción de la imagen aquí

— Hesam
fuente
No sé por qué, "buttonBarPositiveButtonStyle" no funciona para mí, pero "android: buttonBarPositiveButtonStyle" funciona correctamente.
— LukaszTaraszka
El estilo no se aplica a PositiveButton. Lo mismo con el negativo.
— LukaszTaraszka
11

Primero, es mejor usar use MaterialAlertDialog si está usando Material Theme.

Puede leer más aquí - Material.io → Diálogos de temas

ingrese la descripción de la imagen aquí

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

 

Este es el layout.xml de las acciones MaterialAlertDialog. Como puede ver, hay 3 botones y cada uno tiene su propio estilo. Entonces, así es como puede cambiarlos.

Paso 1: Dígale a Android que desea modificar el tema MaterialAlertDialog predeterminado .

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

Paso 2: Dígale a Android que desea modificar un estilo de botón específico. buttonBarNeutralButtonStyle, buttonBarNegativeButtonStyleobuttonBarPositiveButtonStyle

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

Paso 3: define tu estilo personalizado

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

Encontré otra solución para esto usando MaterialComponents aquí: 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>

Aunque todavía no es un "comportamiento previsto" para mí.

— cercado
fuente
5

Si no desea usar androidx.appcompat.app.AlertDialog, puede simplemente redefinir el estilo de los botones de diálogo:

En su 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"/>
— Sylvain Lagache
fuente
3

Si está utilizando la com.android.support:design:28.0.0biblioteca, el uso android.support.v7.app.AlertDialogfunciona como se esperaba.

— Tamoxina
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.