Styling ActionBar dropdown menu

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.

Answers


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


Try setting itemTextAppearance. That should achieve what you want.


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>

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.


Need Your Help

Error running node app in WebMatrix

node.js runtime-error webmatrix webmatrix-2

I installed WebMatrix and followed these instructions to install IIS 7 on my Windows 7 machine.

Passing multiple values for a single parameter in Reporting Services

sql reporting-services parameters query-string

I have several Multi-Select parameters in my report. I am trying to find a way to pass in multiple values for a single parameter in the web query string? If I pass in a single value, it works fine....