Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What theme attributes do I need to override to change the blue highlight color of my dialogs?

I have a theme called "greenhighlight" — this theme was generated using the Android Action Bar Style Generator, and inherits from the default ActionBarSherlock theme. The theme does nothing except change the highlight at the bottom of the ActionBar from blue to green.

To theme all my activities, I just do:

<application android:theme="@style/Theme.greenhighlight"...

This works pretty well for activities (note the green highlight on the bottom of the ActionBar):

themed Android activity

However, I'm having difficulty theming my dialogs to match my activities:

default theme Android list dialog

default theme Android progress dialog

My "greenhighlight_Dialog" theme is defined as:

<style name="greenhighlight_Dialog" parent="@style/Theme.Sherlock.Dialog">
    <item name="android:progressBarStyleHorizontal">
        @style/greenhighlight_ProgressBar
    </item>
</style>

I'm inheriting from the default Sherlock dialog theme, and overriding the progress bar using the progress bar style as defined by my generated "greenhighlight" theme — you can see that the progress bar is the correct shade of green in the screenshot above.

To use the theme, I'm running the following code:

ContextThemeWrapper ctw = 
    new ContextThemeWrapper(this, R.style.greenhighlight_Dialog);
AlertDialog.Builder builder = new AlertDialog.Builder(ctw);
...
ProgressDialog pd = new ProgressDialog(this, R.style.greenhighlight_Dialog);
...

My problem is that I have no idea what attributes I need to override. I've been looking through styles.xml and themes.xml as recommended by the Styles and Themes doco (which notes that "the R.style reference, however, is not well documented and does not thoroughly describe the styles") — but there are a lot of styles defined on Theme.Dialog and I'm unsure as to which ones I need to override to get the change I want.

What attributes to I need to override for my dialogs to have green title text, a green highlight bar underneath the title and green check marks for checked list items?

like image 475
George Avatar asked Dec 04 '12 01:12

George


2 Answers

I went digging around the source and came across the alert_dialog_holo.xml layout file. This is the divider view:

<View android:id="@+id/titleDivider"
    android:layout_width="match_parent"
    android:layout_height="2dip"
    android:visibility="gone"
    android:background="@android:color/holo_blue_light" />

In the AlertController class, it's visibility is set to VISIBLE if there is a title present. Since the color is hardcoded, there's not going to be a way to overwrite this with a style attribute.

This is the title view:

<com.android.internal.widget.DialogTitle android:id="@+id/alertTitle"
    style="?android:attr/windowTitleStyle"
    android:singleLine="true"
    android:ellipsize="end"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

So it uses the windowTitleStyle. It took a lot of chasing, but I eventually found the style that uses:

<style name="TextAppearance.Holo.DialogWindowTitle">
    <item name="android:textSize">22sp</item>
    <item name="android:textColor">@android:color/holo_blue_light</item>
</style>

Following the parent styles back, I was able to change the text color only via styles:

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

<style name="AlertDialogStyle" parent="@android:style/Theme.Holo.Dialog">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</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">@style/DialogWindowTitle</item>
</style>

<style name="DialogWindowTitle">
    <item name="android:maxLines">1</item>
    <item name="android:scrollHorizontally">true</item>
    <item name="android:textAppearance">@style/DialogWindowTitleAppearance</item>
</style>

<style name="DialogWindowTitleAppearance" parent="@android:style/TextAppearance.Holo.DialogWindowTitle">
    <item name="android:textColor">#00ff00</item>
</style>

Now for the divider, you can't change it via styles, but since you know the id, you can extend the AlertDialog class and intercept it when it creates its layout (onCreate) and change it's color. Though this is handled in the private AlertController class, so I'm unsure how much luck you'll have. I'll look into this more and come back if I come up with anything.

like image 139
Jason Robinson Avatar answered Oct 27 '22 01:10

Jason Robinson


I found a solution to remove the divider: just add the following line in your custom alert dialog style (please refer to AlertDialogStyle in Jason Robinson's answer):

    <item name="android:divider">@null</item>"

Then the divider will gone.

If you still want to add a custom divider, you can add it in your custom content layout.

like image 30
Min Avatar answered Oct 27 '22 00:10

Min