Change color of frame around the dialog title in Android

Question

I want to change the background of alert dialog title in theme. I do following changes in theme:

<style name="NgTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:dialogTheme">@style/NgDialogTheme</item>
    <item name="android:alertDialogTheme">@style/NgAlertDialogTheme</item>
</style>

<style name="NgDialogTheme" parent="@android:style/Theme.Holo.Light.Dialog">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:windowTitleStyle">@style/NgWindowTitleStyle</item>
</style>

<style name="NgAlertDialogTheme" parent="@style/NgDialogTheme">
</style>

<style name="NgWindowTitleStyle" parent="android:TextAppearance.Holo.DialogWindowTitle">
    <item name="android:background">#318d99</item>
    <item name="android:textColor">#fff</item>
</style>

I expected that background of title becomes #318d99. But only background of text is #318d99:

1. How can I change white frame around the title to #318d99?
2. Also the frame around the dialog isn't transparent. How can I fix it?

Answer 1

There are some valuable posts about this already and very closely related to your question.

1. Google's post on customizing this is possibly worth looking at first: https://sites.google.com/site/androidhowto/how-to-1/customize-alertdialog-theme
2. Take a look at this blog post: http://blog.supenta.com/2014/07/02/how-to-style-alertdialogs-like-a-pro/

Specifically, go to Part 5: Styling the Background .

To summarize, they suggest that you will probably have to

• Stop inheriting from Holo
• Give your main theme an alertDialogStyle
• Then create a style with the following attributes, which you can get a reference to here: http://developer.android.com/reference/android/R.styleable.html#AlertDialog

You'll want to create a new style that inherits from the default alertdialog theme (this is discussed in both posts I mentioned above):

<style name="CustomDialogTheme" parent="@android:style/Theme.Dialog">
    <item name="android:bottomBright">@color/white</item>
    <item name="android:bottomDark">@color/white</item>
    <item name="android:bottomMedium">@color/white</item>
    <item name="android:centerBright">@color/white</item>
    <item name="android:centerDark">@color/white</item>
    <item name="android:centerMedium">@color/white</item>
    <item name="android:fullBright">@color/orange</item>
    <item name="android:fullDark">@color/orange</item>
    <item name="android:topBright">@color/blue</item>
    <item name="android:topDark">@color/blue</item>
</style>