Diseño de materiales sin diálogos de alerta de estilo


161

He agregado el diseño del material appCompat a mi aplicación y parece que los cuadros de diálogo de alerta no están usando mis colores primario, primario oscuro o de acento.

Aquí está mi estilo base:

<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
    <item name="android:textColorPrimary">@color/action_bar_gray</item>
</style>

Según tengo entendido, el texto del botón de diálogo también debe usar estos colores. ¿Estoy equivocado en mi entendimiento o hay algo más que necesito hacer?


Solución:

La respuesta marcada me llevó por el buen camino.

<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
    <item name="android:actionModeBackground">@color/apptheme_color_dark</item>
    <item name="android:textColorPrimary">@color/action_bar_gray</item>
    <item name="sdlDialogStyle">@style/DialogStyleLight</item>
    <item name="android:seekBarStyle">@style/SeekBarNavyTheme</item>
</style>

<style name="StyledDialog" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
</style>


15
¿Se supone que la parte inferior es la solución? Si es así, publíquelo como una respuesta propia , no edite la respuesta en la pregunta.
Adi Inbar

Respuestas:


463

ACTUALIZADO EN AGO 2019 CON LOS COMPONENTES DE MATERIAL PARA LA BIBLIOTECA DE ANDROID:

Con los nuevos componentes de Material para la biblioteca de Android , puede usar la nueva com.google.android.material.dialog.MaterialAlertDialogBuilderclase, que se extiende desde la androidx.appcompat.AlertDialog.Builderclase existente y proporciona soporte para las últimas especificaciones de Diseño de materiales.

Solo usa algo como esto:

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

Puede personalizar los colores extendiendo el ThemeOverlay.MaterialComponents.MaterialAlertDialogestilo:

  <style name="CustomMaterialDialog" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
     <!-- Background Color-->
     <item name="android:background">#006db3</item>
     <!-- Text Color for title and message -->
     <item name="colorOnSurface">@color/secondaryColor</item>
     <!-- Text Color for buttons -->
     <item name="colorPrimary">@color/white</item> 
     ....
  </style>  

Para aplicar su estilo personalizado solo use el constructor:

new MaterialAlertDialogBuilder(context, R.style.CustomMaterialDialog)

ingrese la descripción de la imagen aquí

Para personalizar los botones, el título y el texto del cuerpo, consulte esta publicación para obtener más detalles.

También puede cambiar globalmente el estilo en el tema de su aplicación:

 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="materialAlertDialogTheme">@style/CustomMaterialDialog</item>
 </style>

CON BIBLIOTECA DE APOYO Y TEMA APPCOMPAT:

Con el nuevo AppCompat v22.1puede usar el nuevo android.support.v7.app.AlertDialog .

Solo usa un código como este:

import android.support.v7.app.AlertDialog

AlertDialog.Builder builder =
       new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle);
builder.setTitle("Dialog");
builder.setMessage("Lorem ipsum dolor ....");
builder.setPositiveButton("OK", null);
builder.setNegativeButton("Cancel", null);
builder.show();

Y usa un estilo como este:

<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorAccent">#FFCC00</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
        <item name="android:background">#5fa3d0</item>
    </style>

De lo contrario, puede definir en su tema actual:

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- your style -->
    <item name="alertDialogTheme">@style/AppCompatAlertDialogStyle</item>
</style>

y luego en tu código:

 import android.support.v7.app.AlertDialog

    AlertDialog.Builder builder =
           new AlertDialog.Builder(this);

Aquí el AlertDialog en Kitkat: ingrese la descripción de la imagen aquí


2
¿Por qué obligar a AlertDialog.Builder a usar el tema exacto en lugar de actualizar el predeterminado? Preferiría resolver este problema en styles.xml en lugar de código Java.
Tomáš Hubálek

2
Las fuentes de título y botones no están en negrita en los dispositivos pre-lollipop.
jimmy0251

9
Tuve que anteponer "android:" para que funcione:<item name="android:alertDialogTheme">@style/AppCompatAlertDialogStyle</item>

1
+1 para una respuesta excelente, pero ¿cómo puedo lograr la misma interfaz de usuario para la versión de Android debajo de Lollypop ... porque con esto en la siguiente interfaz de usuario del dispositivo se ve muy raro?
realpranav

1
agregar importación android.support.v7.app.AlertDialog funciona
FlipNovid

9

al inicializar el generador de diálogo, pase el segundo parámetro como tema. Mostrará automáticamente el diseño del material con el nivel API 21.

AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);

o,

AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);

4

AppCompat no hace eso para los cuadros de diálogo (al menos no todavía)

EDITAR: lo hace ahora. asegúrese de usarandroid.support.v7.app.AlertDialog


Parece que puedes hacer algunas modificaciones a los estilos de los diálogos con AppCompat
Mateo

mi Android Studio por defecto import app.AlertDialogno me dio la aplicación Compat. Traté de averiguar qué está mal durante unos 40 minutos antes de comprobarlo ... ¡Maldita sea Google!
Glorifind



1

Prueba esta biblioteca:

https://github.com/avast/android-styled-dialogs

Se basa en DialogFragmentslugar de AlertDialogs(como el de @afollestad). La principal ventaja: los cuadros de diálogo no se descartan después de la rotación y las devoluciones de llamada siguen funcionando.


Mi biblioteca es mucho más capaz. Y siempre puede ajustar un diálogo con un fragmento de diálogo. 😛
afollestad

1

Por alguna razón, android: textColor solo parece actualizar el color del título. Puede cambiar el color del texto del mensaje utilizando un

SpannableString.AlertDialog.Builder builder = new AlertDialog.Builder(new ContextThemeWrapper(this, R.style.MyDialogTheme));

AlertDialog dialog = builder.create();
                Spannable wordtoSpan = new SpannableString("I know just how to whisper, And I know just how to cry,I know just where to find the answers");
                wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 15, 30, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                dialog.setMessage(wordtoSpan);
                dialog.show();

0

Diálogos de alerta de diseño de materiales: fuente personalizada, botón, color y forma, ..

 MaterialAlertDialogBuilder(requireContext(),
                R.style.MyAlertDialogTheme
            )
                .setIcon(R.drawable.ic_dialogs_24px)
                .setTitle("Feedback")
                //.setView(R.layout.edit_text)
                .setMessage("Do you have any additional comments?")
                .setPositiveButton("Send") { dialog, _ ->

                    val input =
                        (dialog as AlertDialog).findViewById<TextView>(
                            android.R.id.text1
                        )
                    Toast.makeText(context, input!!.text, Toast.LENGTH_LONG).show()

                }
                .setNegativeButton("Cancel") { _, _ ->
                    Toast.makeText(requireContext(), "Clicked cancel", Toast.LENGTH_SHORT).show()
                }
                .show()

Estilo:

  <style name="MyAlertDialogTheme" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
  
        <item name="android:textAppearanceSmall">@style/MyTextAppearance</item>
        <item name="android:textAppearanceMedium">@style/MyTextAppearance</item>
        <item name="android:textAppearanceLarge">@style/MyTextAppearance</item>

        <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
        <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Neutral</item>
        <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>

        <item name="android:backgroundDimEnabled">true</item>

        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Dialog.Rounded
        </item>

    </style>




    <style name="MyTextAppearance" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily">@font/rosarivo</item>
    </style>


        <style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
   <!--     <item name="backgroundTint">@color/colorPrimaryDark</item>-->
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@color/colorPrimary</item>
       <!-- <item name="android:textColor">@android:color/white</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">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <!--<item name="android:textColor">@android:color/darker_gray</item>-->
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>


  <style name="ShapeAppearanceOverlay.MyApp.Dialog.Rounded" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">8dp</item>
    </style>

Salida: ingrese la descripción de la imagen aquí

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.