How to use and style new AlertDialog from appCompat 22.1 and above

Question

I am trying to migrate from default android AlertDialog to the new one included in appCompat-22.1 So far I understand you only have to import android.support.v7.app.AlertDialog package in order to use it.

But how can I style it? For example change the positive/negative button colors, title color, message color and background color?

Galvanize

Answer 1

When creating the AlertDialog you can set a theme to use.

Example - Creating the Dialog

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

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

Result

Edit

In order to change the Appearance of the Title, you can do the following. First add a new style:

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

afterwards simply reference this style in your MyAlertDialogStyle:

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

This way you can define a different textColor for the message via android:textColorPrimary and a different for the title via the style.

Bostick

Thank you @Bostick One more thing. Many libraries allow to have different Title and Text colors. Do you know if this is possible here too? – Galvanize

Hey again! Is there a way to change text size of message? – Galvanize

@ThanosF Unfortunately I'm not aware of any xml attribute that does this. But it's surely possible via Java-Code. – Bostick

Is there a way to style the buttons as well? e.g. aligning them RTL or LTR? If yes, I've opened a new question for this... #33621300 – Sensation

this is working fine but my dialogue box also contains some hyperlinks which are not working, can anyone help me out with it? – Fructuous

@summers Jup. That's basically the idea of appcompat-v7 - it brings backwards compatibility of newer components down to API Level 7 (Android 2.1) – Bostick

In order to have the buttons text color working on 21+, I had to had a android:buttonStyle item to "MyAlertDialogStyle", and a android:textColor item in the custom button style. – Levis

See @neoteknic's answer, below, for how to do this without adding the second parameter to the Builder constructor. – Worldbeater

@TimAutin god bless you, I was struggling with colorAccent being ignored on 21+ – Zircon

@Bostick When I want to inherit then change a style like Theme.AppCompat.Dialog where is the reference for that style so I can see the members and their values so I can decide what to inherit and change? – Syphilis

@Syphilis Just click on the declaration which leads to the definition with all the attributes – Bostick

Answer 2

To use a theme for all the application, and don't use the second parameter to style your Dialog

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

On my app using a color accent in theme don't show the alertDialog's buttons with the theme colorAccent I have to add a dialog style in the theme.

Heterolysis

Does not work on API 10 (android 2.3), probably only on API 11+. – Negro

Maybe on API 15+. I start new project only on API 15+, I think that Android before 4 is obsolete in 2015. – Heterolysis

@Negro It does work on API 10 using dependency com.android.support:design:23.2.1 – Paronym

IDEA says that API 21+ is required to use colorAccent on Base.Theme.AppCompat.Light.Dialog.Alert using 'com.android.support:design:22.2.1' – Jotunheim

@Felipe Andrade Alway target the lastest SDK version, it should work ! I have a projet with min api 15 and target 25 design:22.x is obsolete, use 25.1.x and more – Heterolysis

You may need to use <item name="dialogTheme"> instead of <item name="alertDialogTheme"> – Sherris

Answer 3

If you want to use the new android.support.v7.app.AlertDialog and have different colors for the buttons and also have a custom layout then have a look at my 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;
}

Flavine

That's great! Thank you – Galvanize

Thanks, this is the only way it worked for me, but can you tell me how can I get the color for the checkbox as well? In my app, there is a dialog with a list of radio buttons created via Builder setSingleChoiceItems(CharSequence[] items, int checkedItem, final OnClickListener listener). I don't want to go as far as subclassing the adapter and tweaking the view there. – Norenenorfleet

heavy artillery is what always works! I had to use this to take care of 2 rebel buttons that always refused to change to the accent color! – Candlenut

Answer 4

Follow @reVerse answer but in my case, I already had some property in my AppTheme like

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

So my dialog will look like

I solved it by

1) Change the import from android.app.AlertDialog to android.support.v7.app.AlertDialog
2) I override 2 property in AppTheme with null value

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

Hope it help another people

Smokeproof

Ah, thank you! I was not using the support AlertDialog. – Hartsell

Thanks, the solution still works today. The spelling, please check, is it Cancal or Cancel? – Intima

@AbhinavSaxena should be Cancel, my spelling mistake (this button text is handle by us, we can use any value), glad it help – Smokeproof

No issues, Since I was using the material theme I had to change the parent of the AppTheme as: "Theme.AppCompat.Light". Then it worked. – Intima

Answer 5

If you're like me you just want to modify some of the colors in AppCompat, and the only color you need to uniquely change in the dialog is the background. Then all you need to do is set a color for colorBackgroundFloating.

Here's my basic theme that simply modifies some colors with no nested themes:

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

Eructate

Answer 6

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

Humphreys