Material Design not styling alert dialogs

Question

I've added the appCompat material design to my app and it seems that the alert dialogs are not using my primary, primaryDark, or accent colors.

Here is my base style:

<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
    <item name="android:textColorPrimary">@color/action_bar_gray</item>
</style>

Based on my understanding the dialogs button text should also use these colors. Am I wrong on my understanding or is there something more I need to do?

Solution:

The marked answer got me on the right track.

<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
    <item name="android:actionModeBackground">@color/apptheme_color_dark</item>
    <item name="android:textColorPrimary">@color/action_bar_gray</item>
    <item name="sdlDialogStyle">@style/DialogStyleLight</item>
    <item name="android:seekBarStyle">@style/SeekBarNavyTheme</item>
</style>

<style name="StyledDialog" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
</style>

Gabriele Mariotti · Accepted Answer · 2020-05-29T14:11:13.003

UPDATED ON Aug 2019 WITH The Material components for android library:

With the new Material components for Android library you can use the new com.google.android.material.dialog.MaterialAlertDialogBuilder class, which extends from the existing androidx.appcompat.AlertDialog.Builder class and provides support for the latest Material Design specifications.

Just use something like this:

new MaterialAlertDialogBuilder(context)
            .setTitle("Dialog")
            .setMessage("Lorem ipsum dolor ....")
            .setPositiveButton("Ok", /* listener = */ null)
            .setNegativeButton("Cancel", /* listener = */ null)
            .show();

You can customize the colors extending the ThemeOverlay.MaterialComponents.MaterialAlertDialog style:

  <style name="CustomMaterialDialog" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
     <!-- Background Color-->
     <item name="android:background">#006db3</item>
     <!-- Text Color for title and message -->
     <item name="colorOnSurface">@color/secondaryColor</item>
     <!-- Text Color for buttons -->
     <item name="colorPrimary">@color/white</item> 
     ....
  </style>

To apply your custom style just use the constructor:

new MaterialAlertDialogBuilder(context, R.style.CustomMaterialDialog)

To customize the buttons, the title and the body text check this post for more details.

You can also change globally the style in your app theme:

 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="materialAlertDialogTheme">@style/CustomMaterialDialog</item>
 </style>

WITH SUPPORT LIBRARY and APPCOMPAT THEME:

With the new AppCompat v22.1 you can use the new android.support.v7.app.AlertDialog.

Just use a code like this:

import android.support.v7.app.AlertDialog

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

And use a style like this:

<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorAccent">#FFCC00</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
        <item name="android:background">#5fa3d0</item>
    </style>

Otherwise you can define in your current theme:

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- your style -->
    <item name="alertDialogTheme">@style/AppCompatAlertDialogStyle</item>
</style>

and then in your code:

 import android.support.v7.app.AlertDialog

    AlertDialog.Builder builder =
           new AlertDialog.Builder(this);

Here the AlertDialog on Kitkat: enter image description here

@AAverin RE Material design guidelines: Dividers are only supposed to be present in certain circumstances. The more common alert dialog usage scenarios won't use them, so right now it assumes the simpler style. If you fall under the less common scenario where you need dividers, you'll have to upgrade to a custom dialog layout instead of the simple dialog builder. Sorry. — Jon Adams, Nov 09 '15 at 16:46
+1 for superb answer but How can i achieve same UI for Android Version Below Lollypop...because with this in below device UI looks so weird. — Pranav P, Dec 23 '15 at 11:14
@PranavPatel using the AppCompat theme you can have the same ui on all devices with API < 21 — Gabriele Mariotti, Dec 23 '15 at 11:28
Using the builder constructor that just takes a `Context` didn't work for me. I had to use the constructor that takes the style resource too. — , Apr 13 '16 at 00:45
You don't have to specify the style `R.style.AppCompatAlertDialogStyle` in your `AlertDialog.Builder` constructor. Just make sure the activity, you are running your dialog from, uses `AppTheme` as a theme — Maksim Dmitriev, May 02 '16 at 17:16
@MaksimDmitriev It depends if you want a particular style for your dialog — Gabriele Mariotti, May 02 '16 at 17:40
The button's text color will not change to yellow for me, it is in light green whatever I do. — Gabor, May 03 '16 at 21:18
Another user mentioned having prepend `android:` to `alertDialogTheme` but this has the opposite effect for me. No idea why. Different import for AlertDialog, maybe? Make sure you're using android.support.v7.app.AlertDialog. — Big McLargeHuge, Dec 13 '18 at 17:48
However yet in 2021, android themeing and styling it's all a mess. A consolidation is required. — Phantom Lord, Aug 01 '21 at 10:12

score 11 · Answer 2 · answered Jan 28 '15 at 15:36

when initializing dialog builder, pass second parameter as the theme. It will automatically show material design with API level 21.

AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);

or,

AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);

score 5 · Answer 3 · edited Feb 19 '18 at 11:38

5

AppCompat doesn't do that for dialogs (not yet at least)

EDIT: it does now. make sure to use android.support.v7.app.AlertDialog

edited Feb 19 '18 at 11:38

AskNilesh

67,701
16
123
163

answered Oct 19 '14 at 22:20

nadavfima

3,012
1
11
9

Looks like you can do some modifications to the dialogs styles with AppCompat – Matthew Oct 20 '14 at 01:31
my Android Studio by default gave me `import app.AlertDialog` not the appCompat one. I tried to figure out what is wrong for about 40 minutes before I actually check it... Damn you google! – Glorifind Oct 28 '15 at 12:04

score 4 · Answer 4 · answered Jul 18 '20 at 17:21

Material Design styling alert dialogs: Custom Font, Button, Color & shape,..

 MaterialAlertDialogBuilder(requireContext(),
                R.style.MyAlertDialogTheme
            )
                .setIcon(R.drawable.ic_dialogs_24px)
                .setTitle("Feedback")
                //.setView(R.layout.edit_text)
                .setMessage("Do you have any additional comments?")
                .setPositiveButton("Send") { dialog, _ ->

                    val input =
                        (dialog as AlertDialog).findViewById<TextView>(
                            android.R.id.text1
                        )
                    Toast.makeText(context, input!!.text, Toast.LENGTH_LONG).show()

                }
                .setNegativeButton("Cancel") { _, _ ->
                    Toast.makeText(requireContext(), "Clicked cancel", Toast.LENGTH_SHORT).show()
                }
                .show()

Style:

  <style name="MyAlertDialogTheme" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
  
        <item name="android:textAppearanceSmall">@style/MyTextAppearance</item>
        <item name="android:textAppearanceMedium">@style/MyTextAppearance</item>
        <item name="android:textAppearanceLarge">@style/MyTextAppearance</item>

        <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
        <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Neutral</item>
        <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>

        <item name="android:backgroundDimEnabled">true</item>

        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Dialog.Rounded
        </item>

    </style>




    <style name="MyTextAppearance" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily">@font/rosarivo</item>
    </style>


        <style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
   <!--     <item name="backgroundTint">@color/colorPrimaryDark</item>-->
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@color/colorPrimary</item>
       <!-- <item name="android:textColor">@android:color/white</item>-->
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>


    <style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <!--<item name="android:textColor">@android:color/darker_gray</item>-->
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>


  <style name="ShapeAppearanceOverlay.MyApp.Dialog.Rounded" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">8dp</item>
    </style>

Output:

score 3 · Answer 5 · edited May 23 '17 at 12:10

3

You could use

Material Design Library

Material Design Library made for pretty alert dialogs, buttons, and other things like snack bars. Currently it's heavily developed.

Guide, code, example - https://github.com/navasmdc/MaterialDesignLibrary

Guide how to add library to Android Studio 1.0 - How do I import material design library to Android Studio?

.

Happy coding ;)

edited May 23 '17 at 12:10

Community

1
1

answered Jan 15 '15 at 12:38

Inoy

1,065
1
17
24

Feng Dai · Answer 6 · 2023-07-09T07:51:43.147

2

Edit: This answer is not recommended anymore.

You can consider this project: https://github.com/fengdai/AlertDialogPro

It can provide you material theme alert dialogs almost the same as lollipop's. Compatible with Android 2.1.

edited Jul 09 '23 at 07:51

answered Nov 03 '14 at 14:09

Feng Dai

633
5
9

Just a note: This answer is older, then the accepted one. – rekire Apr 16 '15 at 07:24

score 1 · Answer 7 · answered Apr 06 '15 at 16:56

For some reason the android:textColor only seems to update the title color. You can change the message text color by using a

SpannableString.AlertDialog.Builder builder = new AlertDialog.Builder(new ContextThemeWrapper(this, R.style.MyDialogTheme));

AlertDialog dialog = builder.create();
                Spannable wordtoSpan = new SpannableString("I know just how to whisper, And I know just how to cry,I know just where to find the answers");
                wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 15, 30, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                dialog.setMessage(wordtoSpan);
                dialog.show();

score 0 · Answer 8 · answered Jan 08 '15 at 14:36

0

Try this library:

https://github.com/avast/android-styled-dialogs

It's based on DialogFragments instead of AlertDialogs (like the one from @afollestad). The main advantage: Dialogs don't dismiss after rotation and callbacks still work.

answered Jan 08 '15 at 14:36

David Vávra

18,446
7
48
56

My library is much more capable. And you can always wrap a Dialog with a DialogFragment. – afollestad Nov 16 '15 at 03:04

Material Design not styling alert dialogs

8 Answers8

Material Design Library

Linked

Related