AlertDialog styling - how to change style (color) of title, message, etc

Question

I've breaking my head over this quite a bit. What I need to do is, change the style of all AlertDialogs in my android application - dialog background needs to be white-ish, and text needs to be black-ish. I tried creating a lot of styles, themes, and applying from the code, manifest, etc, but no success, with regard to the text colors inside the AlertDialog. Right now, I have the simplest of codes, set like this:

Manifest:

<application
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >

styles.xml:

<style name="AppTheme" parent="AppBaseTheme">
    <item name="android:alertDialogStyle">@style/DialogStyle</item>
</style>

<style name="DialogStyle" parent="@android:style/Theme.Dialog">
    <!-- changing these background stuff works fine -->
    <item name="android:bottomBright">@android:color/white</item>
    <item name="android:bottomDark">@android:color/white</item>
    <item name="android:bottomMedium">@drawable/dialog_footer_bg</item>
    <item name="android:centerBright">@android:color/white</item>
    <item name="android:centerDark">@drawable/dialog_body_bg</item>
    <item name="android:centerMedium">@android:color/white</item>
    <item name="android:fullBright">@color/orange</item>
    <item name="android:fullDark">@color/orange</item>
    <item name="android:topBright">@color/green</item>
    <item name="android:topDark">@drawable/dialog_header_bg</item>

The items listed below don't work (please read the comments I've put above each element):

    <!-- panelBackground is not getting set to null, there is something squarish around it -->
    <item name="android:panelBackground">@null</item>

    <!-- Setting this textColor doesn't seem to have any effect at all. Messages, title, button text color, whatever; nothing changes. -->
    <item name="android:textColor">#000000</item>

    <!-- Also tried with textAppearance, as follows. Didn't work -->
    <item name="android:textAppearance">?android:attr/textColorPrimaryInverse</item>

    <!-- Also tried changing textAppearancePrimary, to no avail -->
    <item name="android:textColorPrimary">#000000</item>

    <!-- Also need to change the dialog title text, tried it as follows, dint work: -->
    <item name="android:windowTitleStyle">@style/DialogWindowTitle</item>
</style>

The DialogWindowTitle is defined as follows:

<style name="DialogWindowTitle">
    <item name="android:textAppearance">?android:attr/textAppearanceMediumInverse</item>
</style>

So none of these is working. Can anyone tell me what I could be doing wrong, and how can I:

1. Change text color for messages (content text)
2. Change title text color
3. Remove the panel background

Note: I need to support API 8 (2.2) upwards. Also, I've went through most of the related question here, and google groups, but can't figure out, though I have a feeling its right under my nose!

Edit: adding screenshot:

Solution 1

You need to define a Theme for your AlertDialog and reference it in your Activity's theme. The attribute is alertDialogTheme and not alertDialogStyle. Like this:

<style name="Theme.YourTheme" parent="@android:style/Theme.Holo">
    ...
    <item name="android:alertDialogTheme">@style/YourAlertDialogTheme</item>
</style>

<style name="YourAlertDialogTheme">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
    <item name="android:windowMinWidthMajor">@android:dimen/dialog_min_width_major</item>
    <item name="android:windowMinWidthMinor">@android:dimen/dialog_min_width_minor</item>
    <item name="android:windowTitleStyle">...</item>
    <item name="android:textAppearanceMedium">...</item>
    <item name="android:borderlessButtonStyle">...</item>
    <item name="android:buttonBarStyle">...</item>
</style>

You'll be able to change color and text appearance for the title, the message and you'll have some control on the background of each area. I wrote a blog post detailing the steps to style an AlertDialog.

Solution 2

Remove the panel background

 <item name="android:windowBackground">@color/transparent_color</item> 
 <color name="transparent_color">#00000000</color>

This is Mystyle:

 <style name="ThemeDialogCustom">
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
    <item name="android:windowBackground">@color/transparent_color</item>
    <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
    <item name="android:colorBackgroundCacheHint">@null</item>
</style>

Which i have added to the constructor.

Add textColor :

<item name="android:textColor">#ff0000</item>

Solution 3

Here's my Code to theme the alert dialog box:

<style name="alertDialog" parent="Theme.AppCompat.Dialog.Alert">
    <item name="android:background">@color/light_button_text_color</item>
    <item name="android:textColor">@android:color/black</item>
    <item name="android:textColorPrimary">@android:color/black</item>
    <item name="android:textColorSecondary">@android:color/black</item>
    <item name="android:titleTextColor" tools:targetApi="m">@android:color/black</item>
</style>

Place this code in styles.xml. In your java apply this theme as:

AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.alertDialog);

Output of the code

Solution 4

You have to add the style to the constructor of the dialog

builder = new AlertDialog.Builder(this, R.style.DialogStyle);

Solution 5

I changed color programmatically in this way :

var builder = new AlertDialog.Builder (this);
...
...
...
var dialog = builder.Show ();
int textColorId = Resources.GetIdentifier ("alertTitle", "id", "android");
TextView textColor = dialog.FindViewById<TextView> (textColorId);
textColor?.SetTextColor (Color.DarkRed);

as alertTitle, you can change other data by this way (next example is for titleDivider):

int titleDividerId = Resources.GetIdentifier ("titleDivider", "id", "android");
View titleDivider = dialog.FindViewById (titleDividerId);
titleDivider?.SetBackgroundColor (Color.Red);

this is in C#, but in java it is the same.

View more solutions

Comments

[moonlightcheese]

note that use of this constructor is only available in API level 11+

[general03]

You're right, i looked for a solution several days without solution. So I use a basic Dialog with my custom view in xml. Like this final ContextThemeWrapper l_contextThemeWrapper = new ContextThemeWrapper(this, R.style.myDialogStyle ); dialog = new Dialog(l_contextThemeWrapper); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.setContentView(R.layout.dialog);

[Nlinscott]

blog post got me exactly what I needed. I shouldve been using android:textColorPrimary and android:textColorAlertDialogListItem to style the contents of my dialog.

[sherpya]

alertDialogTheme is api11

[zionpi]

alertDialogTheme means everything else.

[Tomask]

setting android:textAppearanceMedium doesn't work for me when using app compat alert dialog: stackoverflow.com/questions/35179537/…

[Sergio Serra]

that's correct using Material theme you cannot use android:textAppearanceMedium to change the content style, see this thread for a workaround stackoverflow.com/questions/35179537/…

[LadyWoodi]

name="android:textColor" line worked for me. <item name="android:textColorPrimary">@color/profileWhite</item> was editing only text message color.

[Rishabh Wadhwa]

This is the java version of the code - int textColorId = getResources().getIdentifier("alertMessage", "id", "android"); TextView textColor = (TextView) alertDialog.findViewById(textColorId); if (textColor != null) { textColor.setTextColor(Color.RED); }

[Dr.jacky]

But how to change font typeface of buttons?