Styling ActionBar dropdown menu

Question

I'm using a custom theme that inherits from DarkActionBar and I want to customize dropdown menu to be white like when using Light Holo theme.

I've been able to change the background to white using:

<style name="MyTheme" parent="@style/Theme.Light.DarkActionBar">
    <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
</style>
<style name="MyDropDownNav">
    <item name="android:background">@drawable/spinner_background_white</item>
    <item name="android:popupBackground">@drawable/menu_dropdown_panel_whyite</item>
    <item name="android:dropDownSelector">@drawable/selectable_background_white</item>
</style>

But I haven't any clue of how to change the text color to black. Because after setting white drawable the problem is that text isn't visible because is white on white background.

Answer 1

I answer myself after some investigation. In addition to question's styling you need to:

• Customize android:spinnerDropDownItemStyle for actionBarWidgetTheme changing it's text appearance.
• Also don't forget that dropdown list is managed by the adapter you use. Then if you used the standard one (simple_dropdown_item_1line) there's no problem. But if you used a custom one like me (to be able to add an icon) don't forget to apply style="?attr/spinnerDropDownItemStyle" in your layout TextView.

Then final custom style is:

<resources xmlns:android="http://schemas.android.com/apk/res/android">

<style name="Theme.myapp" parent="@style/Theme.Light.DarkActionBar">
    <item name="android:actionDropDownStyle">@style/myapp_DropDownNav</item>        
    <item name="android:actionBarWidgetTheme">@style/myapp.actionBarWidgetTheme</item>
</style>

<style name="myapp.actionBarWidgetTheme" parent="@style/Theme.">
     <item name="android:spinnerDropDownItemStyle">@style/myapp.Widget.DropDownItem.Spinner</item>
</style>

<style name="myapp_DropDownNav" parent="@style/Widget.Spinner.DropDown.ActionBar">
    <item name="background">@drawable/spinner_background_ab_myapp</item>
    <item name="android:background">@drawable/spinner_background_ab_myapp</item>
    <item name="android:popupBackground">@drawable/menu_dropdown_panel_myapp</item>
    <item name="android:dropDownSelector">@drawable/selectable_background_myapp</item>
</style>

<style name="myapp.Widget.DropDownItem.Spinner" parent="Widget.DropDownItem.Spinner">
    <item name="android:textAppearance">@style/myapp.TextAppearance.Widget.DropDownItem</item>
</style>

<style name="myapp.TextAppearance.Widget.DropDownItem" parent="TextAppearance.Widget.DropDownItem">
    <item name="android:textColor">@color/black</item>
</style>

Where drawables in myapp_DropDownNav are white background ones that you can generate with ActionBar Style generator in Android Asset Studio

Answer 2

Try setting itemTextAppearance. That should achieve what you want.

Answer 3

I have stumbled on what may be the simplest way to do this. I was working with the AppCompat library.

<style name="ApplicationTheme" parent="@style/Theme.AppCompat">
    <item name="android:actionBarWidgetTheme">@style/Theme.AppCompat.Light</item>
    <item name="actionBarWidgetTheme">@style/Theme.AppCompat.Light</item>
</style>

Answer 4

My advice is to simply inherit from the Sherlock.Light theme and change the applicable fields to the Dark values. For my app, we wanted a white "up" icon, and white text for the action labels. I don't provide dark versions of my actionbar icons, so they are all white anyway. So after several hours messing around with it and following different people's suggestions, I finally found what I was looking for in the ABS themes file.

I inherit from Sherlock.Light (well, technically HoloEverywhereLight.Sherlock but...) and change:

<item name="android:actionMenuTextColor">@color/White</item>
<item name="actionMenuTextColor">@color/White</item>
<item name="android:homeAsUpIndicator">@drawable/abs__ic_ab_back_holo_dark</item>
<item name="homeAsUpIndicator">@drawable/abs__ic_ab_back_holo_dark</item>
<item name="android:dividerVertical">@drawable/abs__list_divider_holo_dark</item>
<item name="dividerVertical">@drawable/abs__list_divider_holo_dark</item>

That's it. It's way simpler and easier than trying to extend classes, restyle things in code, etc.