Comment utiliser et styliser le nouveau AlertDialog de appCompat 22.1 et supérieur


154

J'essaie de migrer d'Android par défaut AlertDialogvers le nouveau inclus dans appCompat-22.1 Jusqu'à présent, je comprends que vous n'avez qu'à importer un android.support.v7.app.AlertDialogpackage pour l'utiliser.

Mais comment puis-je le coiffer? Par exemple changer les couleurs positives / négatives des boutons, la couleur du titre, la couleur du message et la couleur d'arrière-plan?

Réponses:


448

Lors de la création du, AlertDialogvous pouvez définir un thème à utiliser.

Exemple - Création de la boîte de dialogue

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 - Style personnalisé

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

Résultat

dialogue d'alerte stylisé

Éditer

Afin de modifier l'apparence du titre, vous pouvez procéder comme suit. Ajoutez d'abord un nouveau style:

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

puis référencez simplement ce style dans votre MyAlertDialogStyle:

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

De cette façon, vous pouvez définir un autre textColorpour le message via android:textColorPrimaryet un autre pour le titre via le style.


2
Merci @reVerse Encore une chose. De nombreuses bibliothèques permettent d'avoir différentes couleurs de titre et de texte. Savez-vous si cela est possible ici aussi?
ThanosFisherman

3
Rebonjour! Existe-t-il un moyen de modifier la taille du texte du message?
ThanosFisherman

1
@ThanosF Malheureusement, je ne connais aucun attribut xml qui fasse cela. Mais c'est sûrement possible via Java-Code.
revoir le

2
@summers Jup. C'est essentiellement l'idée de appcompat-v7- cela ramène la compatibilité ascendante des composants plus récents au niveau API 7 (Android 2.1)
revenez

1
Pour que la couleur du texte des boutons fonctionne sur 21+, je devais avoir un élément android: buttonStyle sur "MyAlertDialogStyle", et un élément android: textColor dans le style de bouton personnalisé.
Tim Autin

61

Pour utiliser un thème pour toute l'application et ne pas utiliser le deuxième paramètre pour styliser votre boîte de dialogue

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

Sur mon application, l'utilisation d'un accent de couleur dans le thème n'affiche pas les boutons alertDialog avec le thème colorAccent, je dois ajouter un style de dialogue dans le thème.


Ne fonctionne pas sur l'API 10 (Android 2.3), probablement uniquement sur l'API 11+.
Oliv du

2
Peut-être sur l'API 15+. Je démarre un nouveau projet uniquement sur l'API 15+, je pense qu'Android avant 4 est obsolète en 2015.
neoteknic

@Oliv Cela fonctionne sur l'API 10 en utilisant la dépendance com.android.support:design:23.2.1
passant le

IDEA dit que l'API 21+ est nécessaire pour utiliser colorAccent sur Base.Theme.AppCompat.Light.Dialog.Alert en utilisant 'com.android.support:design:22.2.1'
Felipe Andrade

@Felipe Andrade cible toujours la dernière version du SDK, ça devrait marcher! J'ai un projet avec une api min 15 et un design cible 25: 22.x est obsolète, utilise 25.1.x et plus
neoteknic

19

Si vous souhaitez utiliser le nouveau android.support.v7.app.AlertDialog et avoir des couleurs différentes pour les boutons et également une disposition personnalisée, jetez un œil à mon 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;
}

entrez la description de l'image ici


C'est génial! Merci
ThanosFisherman

Merci, c'est la seule façon dont cela a fonctionné pour moi, mais pouvez-vous me dire comment puis-je obtenir la couleur de la case à cocher également? Dans mon application, il y a une boîte de dialogue avec une liste de boutons radio créés via Builder setSingleChoiceItems(CharSequence[] items, int checkedItem, final OnClickListener listener). Je ne veux pas aller jusqu'à sous-classer l'adaptateur et en peaufiner la vue.
Gabor

l'artillerie lourde est ce qui fonctionne toujours! J'ai dû l'utiliser pour m'occuper de 2 boutons rebelles qui ont toujours refusé de changer de couleur d'accent!
rupps

7

Suivez réponse @reVerse mais dans mon cas, j'avais déjà une propriété dans mon AppThemecomme

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

Donc mon dialogue ressemblera à
entrez la description de l'image ici

Je l'ai résolu par

1) Changer l'importation de android.app.AlertDialogà android.support.v7.app.AlertDialog
2) Je remplace la propriété 2 AppThemeavec une valeur nulle

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

J'espère que cela aidera un autre peuple

entrez la description de l'image ici


Ah merci! Je n'utilisais pas le support AlertDialog.
masterwok

1

Si vous êtes comme moi, vous souhaitez simplement modifier certaines des couleurs dans AppCompat, et la seule couleur que vous devez modifier de manière unique dans la boîte de dialogue est l'arrière-plan. Ensuite, tout ce que vous avez à faire est de définir une couleur pour colorBackgroundFloating.

Voici mon thème de base qui modifie simplement certaines couleurs sans thèmes imbriqués:

    <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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.