Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

AlertDialog not themed as expected

like image 631
Aswin Kumar Avatar asked Apr 24 '13 19:04

Aswin Kumar


People also ask

How can I change dialog alert color?

You can just create a style and apply that theme on the dialog box. So whenever you want to change the color of AlertDialog box, just change color in styles. xml and all the dialog boxes will be updated in the whole application.

How can I customize AlertDialog in Android?

Step 1: Create a XML file: custom_layout. Add the below code in custom_layout. xml. This code defines the alertdialog box dimensions and add a edittext in it.


4 Answers

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.

like image 54
David Ferrand Avatar answered Sep 28 '22 21:09

David Ferrand


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> 
like image 20
Terril Thomas Avatar answered Sep 28 '22 21:09

Terril Thomas


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

like image 34
Anuj Gupta Avatar answered Sep 28 '22 21:09

Anuj Gupta


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

builder = new AlertDialog.Builder(this, R.style.DialogStyle);
like image 29
general03 Avatar answered Sep 28 '22 23:09

general03