Como usar e estilizar o novo AlertDialog do appCompat 22.1 e superior


154

Estou tentando migrar do android padrão AlertDialogpara o novo incluído no appCompat-22.1 Até agora, entendo que você só precisa importar o android.support.v7.app.AlertDialogpacote para usá-lo.

Mas como posso estilizá-lo? Por exemplo, alterar as cores dos botões positivo / negativo, cor do título, cor da mensagem e cor do plano de fundo?

Respostas:


448

Ao criar o, AlertDialogvocê pode definir um tema para usar.

Exemplo - Criando o 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

styled alertdialog

Editar

Para alterar a aparência do título, você pode fazer o seguinte. Primeiro adicione um novo estilo:

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

depois simplesmente referencie esse estilo em seu MyAlertDialogStyle:

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

Dessa forma, você pode definir um diferente textColorpara a mensagem via android:textColorPrimarye um diferente para o título através do estilo.


2
Obrigado @reVerse Mais uma coisa. Muitas bibliotecas permitem ter cores diferentes de título e texto. Você sabe se isso também é possível aqui?
ThanosFisherman

3
Olá de novo! Existe uma maneira de alterar o tamanho do texto da mensagem?
ThanosFisherman

1
@ ThanosF Infelizmente, não conheço nenhum atributo xml que faça isso. Mas é certamente possível via código Java.
reverso

2
@summers Jup. Essa é basicamente a idéia de appcompat-v7- ele traz a compatibilidade com versões anteriores dos componentes mais recentes para o nível API 7 (Android 2.1)
reVerse

1
Para que a cor do texto dos botões funcionasse com mais de 21 anos, tive que ter um item android: buttonStyle como "MyAlertDialogStyle" e um item android: textColor no estilo de botão personalizado.
Tim Autin

61

Para usar um tema para todo o aplicativo e não use o segundo parâmetro para estilizar sua caixa de 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>

No meu aplicativo, usando um sotaque de cor no tema, não mostre os botões do alertDialog com o tema colorAccent. Tenho que adicionar um estilo de diálogo ao tema.


Não funciona na API 10 (Android 2.3), provavelmente apenas na API 11+.
precisa

2
Talvez na API 15+. Eu começo novo projeto apenas na API 15+, eu acho que o Android antes de 4 é obsoleto em 2015.
neoteknic

@Oliv Ele funciona na API 10 usando a dependência com.android.support:design:23.2.1
passerby

A IDEA diz que a API 21+ é necessária para usar o colorAccent no Base.Theme.AppCompat.Light.Dialog.Alert usando 'com.android.support:design:22.2.1'
Felipe Andrade

@Felipe Andrade Alvo sempre a última versão do SDK, deve funcionar! I têm um projet com min api 15 e destino 25 desenho: 22.x é obsoleto, e mais utilização 25.1.x
neoteknic

19

Se você deseja usar o novo android.support.v7.app.AlertDialog e tem cores diferentes para os botões e também possui um layout personalizado, consulte o meu 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;
}

insira a descrição da imagem aqui


Isso é ótimo! Obrigado
ThanosFisherman

Obrigado, esta é a única maneira que funcionou para mim, mas você pode me dizer como posso obter a cor da caixa de seleção também? No meu aplicativo, há uma caixa de diálogo com uma lista de botões de opção criados via Builder setSingleChoiceItems(CharSequence[] items, int checkedItem, final OnClickListener listener). Não quero ir tão longe quanto subclassificar o adaptador e ajustar a exibição lá.
Gabor

artilharia pesada é o que sempre funciona! Eu tive que usar isso para cuidar de 2 botões rebeldes que sempre se recusavam a mudar para a cor de destaque!
rompe

7

Siga resposta @reVerse mas no meu caso, eu já tinha alguma propriedade no meu AppThemecomo

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

Então, minha caixa de diálogo se parecerá
insira a descrição da imagem aqui

Eu resolvi isso

1) Altere a importação de android.app.AlertDialogpara android.support.v7.app.AlertDialog
2) Substituo 2 propriedades AppThemecom 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 ajude outras pessoas

insira a descrição da imagem aqui


Ah obrigado! Eu não estava usando o suporte AlertDialog.
masterwok

1

Se você é como eu, só deseja modificar algumas das cores no AppCompat, e a única cor que você precisa alterar exclusivamente na caixa de diálogo é o plano de fundo. Então, tudo o que você precisa fazer é definir uma cor colorBackgroundFloating.

Aqui está o meu tema básico que simplesmente modifica algumas cores sem temas aninhados:

    <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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.