Cómo usar y diseñar el nuevo AlertDialog de appCompat 22.1 y superior


154

Estoy tratando de migrar de Android predeterminado AlertDialogal nuevo incluido en appCompat-22.1 Hasta ahora entiendo que solo tiene que importar el android.support.v7.app.AlertDialogpaquete para poder usarlo.

¿Pero cómo puedo peinarlo? Por ejemplo, ¿cambia los colores del botón positivo / negativo, el color del título, el color del mensaje y el color de fondo?

Respuestas:


448

Al crear el AlertDialogpuede establecer un tema para usar.

Ejemplo: crear el cuadro de diálogo

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

styles.xml: estilo personalizado

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    <!-- Used for the buttons -->
    <item name="colorAccent">#FFC107</item>
    <!-- Used for the title and text -->
    <item name="android:textColorPrimary">#FFFFFF</item>
    <!-- Used for the background -->
    <item name="android:background">#4CAF50</item>
</style>

Resultado

diálogo de alerta con estilo

Editar

Para cambiar la apariencia del título, puede hacer lo siguiente. Primero agregue un nuevo estilo:

<style name="MyTitleTextStyle">
    <item name="android:textColor">#FFEB3B</item>
    <item name="android:textAppearance">@style/TextAppearance.AppCompat.Title</item>
</style>

luego simplemente haga referencia a este estilo en su MyAlertDialogStyle:

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    ...
    <item name="android:windowTitleStyle">@style/MyTitleTextStyle</item>
</style>

De esta manera, puede definir una diferente textColorpara el mensaje a través android:textColorPrimaryy una diferente para el título a través del estilo.


2
Gracias @reVerse Una cosa más. Muchas bibliotecas permiten tener diferentes colores de título y texto. ¿Sabes si esto también es posible aquí?
ThanosFisherman

3
¡Hola de nuevo! ¿Hay alguna manera de cambiar el tamaño del texto del mensaje?
ThanosFisherman

1
@ThanosF Lamentablemente, no conozco ningún atributo xml que haga esto. Pero seguramente es posible a través de Java-Code.
reVerse

2
@summers Jup. Esa es básicamente la idea de appcompat-v7: trae la compatibilidad con versiones anteriores de los componentes más nuevos al nivel API 7 (Android 2.1)
reVerse el

1
Para que el color del texto de los botones funcionara en 21+, tenía que tener un elemento android: buttonStyle para "MyAlertDialogStyle" y un elemento android: textColor en el estilo de botón personalizado.
Tim Autin

61

Para usar un tema para toda la aplicación, y no use el segundo parámetro para diseñar su Diálogo

<style name="MyTheme" parent="Base.Theme.AppCompat.Light">
    <item name="alertDialogTheme">@style/dialog</item>
    <item name="colorAccent">@color/accent</item>
</style>

<style name="dialog" parent="Base.Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">@color/accent</item>
</style>

En mi aplicación, usando un acento de color en el tema, no se muestran los botones de alerta del Diálogo con el color del tema Acento. Tengo que agregar un estilo de diálogo en el tema.


No funciona en API 10 (Android 2.3), probablemente solo en API 11+.
Oliv

2
Tal vez en API 15+. Empiezo un nuevo proyecto solo en API 15+, creo que Android antes de 4 está obsoleto en 2015.
neoteknic

@Oliv Funciona en API 10 usando la dependencia com.android.support:design:23.2.1
passerby el

IDEA dice que se requiere API 21+ para usar colorAccent en Base.Theme.AppCompat.Light.Dialog.Alert usando 'com.android.support:design:22.2.1'
Felipe Andrade

@Felipe Andrade Alway apunta a la última versión del SDK, ¡debería funcionar! Tengo un proyecto con min api 15 y diseño de target 25: 22.x está obsoleto, uso 25.1.xy más
neoteknic

19

Si desea utilizar el nuevo android.support.v7.app.AlertDialog y tiene diferentes colores para los botones y también tiene un diseño personalizado, eche un vistazo a mi https://gist.github.com/JoachimR/6bfbc175d5c8116d411e

@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {

    View v = inflater.inflate(R.layout.custom_layout, null);

    initDialogUi(v);

    final AlertDialog d = new AlertDialog.Builder(activity, R.style.AppCompatAlertDialogStyle)
            .setTitle(getString(R.string.some_dialog_title))
            .setCancelable(true)
            .setPositiveButton(activity.getString(R.string.some_dialog_title_btn_positive),
                    new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            doSomething();
                            dismiss();
                        }
                    })
            .setNegativeButton(activity.getString(R.string.some_dialog_title_btn_negative),
                    new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            dismiss();
                        }
                    })
            .setView(v)
            .create();

    // change color of positive button         
    d.setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            Button b = d.getButton(DialogInterface.BUTTON_POSITIVE);
            b.setTextColor(getResources().getColor(R.color.colorPrimary));
        }
    });

    return d;
}

ingrese la descripción de la imagen aquí


¡Eso es genial! Gracias
ThanosFisherman

Gracias, esta es la única forma en que funcionó para mí, pero ¿puede decirme cómo puedo obtener el color de la casilla de verificación también? En mi aplicación, hay un cuadro de diálogo con una lista de botones de opción creados mediante Builder setSingleChoiceItems(CharSequence[] items, int checkedItem, final OnClickListener listener). No quiero ir tan lejos como subclasificar el adaptador y ajustar la vista allí.
Gabor

¡la artillería pesada es lo que siempre funciona! ¡Tuve que usar esto para encargarme de 2 botones rebeldes que siempre se negaron a cambiar al color de acento!
rompe

7

Siga respuesta @reVerse pero en mi caso, ya tenía alguna propiedad en mi AppThemecomo

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:textColor">#111</item>
    <item name="android:textSize">13sp</item>
</style>

Entonces mi diálogo se verá así
ingrese la descripción de la imagen aquí

Lo resolví por

1) Cambie la importación de android.app.AlertDialoga android.support.v7.app.AlertDialog
2) Anulo 2 propiedades AppThemecon valor nulo

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    <!-- Used for the buttons -->
    <item name="colorAccent">#FFC107</item>
    <!-- Used for the title and text -->
    <item name="android:textColorPrimary">#FFFFFF</item>
    <!-- Used for the background -->
    <item name="android:background">#4CAF50</item>


    <item name="android:textColor">@null</item>
    <item name="android:textSize">@null</item>
</style>

.

AlertDialog.Builder builder = new AlertDialog.Builder(mContext, R.style.MyAlertDialogStyle);

Espero que ayude a otras personas

ingrese la descripción de la imagen aquí


¡Ah gracias! No estaba usando el soporte AlertDialog.
masterwok

1

Si eres como yo, solo quieres modificar algunos de los colores en AppCompat, y el único color que necesitas cambiar de forma única en el cuadro de diálogo es el fondo. Entonces todo lo que necesita hacer es establecer un color para colorBackgroundFloating.

Aquí está mi tema básico que simplemente modifica algunos colores sin temas anidados:

    <style name="AppTheme" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/theme_colorPrimary</item>
        <item name="colorPrimaryDark">@color/theme_colorPrimaryDark</item>
        <item name="colorAccent">@color/theme_colorAccent</item>
        <item name="colorControlActivated">@color/theme_colorControlActivated</item>
        <item name="android:windowBackground">@color/theme_bg</item>
        <item name="colorBackgroundFloating">@color/theme_dialog_bg</item><!-- Dialog background color -->
        <item name="colorButtonNormal">@color/theme_colorPrimary</item>
        <item name="colorControlHighlight">@color/theme_colorAccent</item>
    </style>

-3
    <item name="editTextColor">@color/white</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textColorHint">@color/gray</item>
    <item name="android:textColorPrimary">@color/gray</item>
    <item name="colorControlNormal">@color/gray</item>
    <item name="colorControlActivated">@color/white</item>
    <item name="colorControlHighlight">#30FFFFFF</item>
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.