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?

reVerse · Accepted Answer · 2016-05-04T06:47:23.393

462

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

styled alertdialog

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.

edited May 04 '16 at 06:47

answered Apr 22 '15 at 13:10

reVerse

35,075
22
89
84

2

Thank you @reVerse One more thing. Many libraries allow to have different Title and Text colors. Do you know if this is possible here too? – ThanosFisherman Apr 22 '15 at 18:04
3

Hey again! Is there a way to change text size of message? – ThanosFisherman Jul 13 '15 at 17:11
1

@ThanosF Unfortunately I'm not aware of any xml attribute that does this. But it's surely possible via Java-Code. – reVerse Jul 13 '15 at 17:20
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... http://stackoverflow.com/questions/33620800/changing-alertdialog-buttons-alignment/33620959#33620959 – Jjang Nov 10 '15 at 10:24
this is working fine but my dialogue box also contains some hyperlinks which are not working, can anyone help me out with it? – vjs3 Jan 29 '16 at 06:50
2

@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) – reVerse Mar 21 '16 at 14:15
1

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. – Tim Autin Jun 22 '16 at 12:08
1

See @neoteknic's answer, below, for how to do this without adding the second parameter to the Builder constructor. – plinehan Nov 01 '16 at 15:01
@TimAutin god bless you, I was struggling with colorAccent being ignored on 21+ – dimsuz Dec 15 '17 at 17:42
@reVerse 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? – mohas Jul 07 '19 at 12:09
@mohas Just click on the declaration which leads to the definition with all the attributes – reVerse Jul 07 '19 at 14:56

score 64 · Answer 2 · answered Apr 22 '15 at 13:30

64

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.

answered Apr 22 '15 at 13:30

neoteknic

1,930
16
32

Does not work on API 10 (android 2.3), probably only on API 11+. – Oliv Nov 12 '15 at 10:15
2

Maybe on API 15+. I start new project only on API 15+, I think that Android before 4 is obsolete in 2015. – neoteknic Nov 12 '15 at 11:50
@Oliv It does work on API 10 using dependency com.android.support:design:23.2.1 – passerby Apr 05 '16 at 19:36
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' – Felipe Andrade Nov 24 '16 at 12:53
@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 – neoteknic Dec 14 '16 at 15:04
You may need to use `` instead of `` – Mr-IDE May 03 '21 at 12:23

score 19 · Answer 3 · answered Dec 19 '15 at 09:26

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

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. — Gabor, May 12 '16 at 00:21
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! — rupps, May 24 '17 at 14:07

score 9 · Answer 4 · answered Jul 29 '17 at 07:48

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

Thanks, the solution still works today. The spelling, please check, is it Cancal or Cancel? — Abhinav Saxena, Jan 11 '22 at 14:31
@AbhinavSaxena should be Cancel, my spelling mistake (this button text is handle by us, we can use any value), glad it help — Linh, Jan 11 '22 at 14:53
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. — Abhinav Saxena, Jan 11 '22 at 16:00

score 4 · Answer 5 · answered Mar 07 '20 at 17:21

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>

score -3 · Answer 6 · answered Apr 06 '17 at 16:47

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

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

6 Answers6

Linked