Can't change the text color with Android Action Bar drop-down navigation

Question

I'm using Drop-down Navigation with my Action bar, and I can't get a sensible color for the corresponding text when using a dark action bar. The action bar itself is a dark grey, and the text color is black, so it's very hard to read.

I followed the basic instructions on the Action Bar developer's guide so my code is simply

SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(this, R.array.action_list, android.R.layout.simple_spinner_dropdown_item);
ActionBar.OnNavigationListener navigationListener = new OnNavigationListener() {
    @Override
    public boolean onNavigationItemSelected(int itemPosition, long itemId) {
        // TODO
        return false;
    }
};
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);        
actionBar.setListNavigationCallbacks(mSpinnerAdapter, navigationListener);

and my styles.xml was simply

<resources>
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    </style>
</resources>

I think that should have given me something sensible, but as the following image shows, it comes out as black text on a dark grey background so it's no good.

I've tried playing around with the styles.xml file to try and solve the problem. My best attempt was the following

<resources>
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <item name="android:actionDropDownStyle">@style/myActionDropDownStyle</item>
        <item name="android:actionBarStyle">@style/myActionBar</item>
    </style>

    <style name="myActionDropDownStyle" parent="android:style/Widget.Holo.Light.Spinner">
        <item name="android:background">@color/LightCyan</item>
    </style>

    <style name="myActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">    
        <item name="android:titleTextStyle">@style/myActionBar.titleTextStyle</item>
    </style>

    <style name="myActionBar.titleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title.Inverse">
        <item name="android:textColor">@color/Orange</item>
    </style>
</resources>

which was (1) able to change the text color of the app title to Orange, (2) able to change the background color of the selected navigation item in the action bar to a light blue, (3) able to change the background color of the dropdown so that at least the black text is shown against a light background. However nothing I do changes the text color itself, either for the selected item shown in the action bar, or for the items shown in the dropdown. My best attempt also looks horrible :-(!

All I want is a dark action bar with a sensible text color for the selected item shown in the action bar, which should be the same text color used when an item is being selected, and with the background color for the dropdown when an item is being selected being the same color as the action bar. But I can't work out how to do it, can anyone help?

FYI, I'm using Eclipse with an adt-bundle that I downloaded very recently (adt-bundle-windows-x86_64-20130219). When I search for solutions, I find a lot about the Sherlock action bar, however the styles for Sherlock weren't included in that adt-bundle. In any case, surely what I want should be possible with the Holo.Light.DarkActionBar that I'm using?

Answer 1

Please forgive my necromancy but this really bugged me today and the solution is actually quite quick and requires no custom adapters or styling.

If you change the context in the SpinnerAdapter's constructor to use getActionBar().getThemedContext() rather than this it will show light text on a dark background that will match the Action Bar's style.

SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(getActionBar().getThemedContext(), R.array.action_list, android.R.layout.simple_spinner_dropdown_item);

Answer 2

I've worked out that I can alter the colors for the drop-down Navigation in code, by creating my own subclass of ArrayAdapter as follows:

public class myArrayAdaptor<T> extends ArrayAdapter<T> {

    public myArrayAdaptor(Context context, int textViewResourceId, T[] objects) {
        super(context, textViewResourceId, objects);
    }

    public static myArrayAdaptor<CharSequence> createFromResource(Context context, int textArrayResId, int textViewResId) {
        CharSequence[] strings = context.getResources().getTextArray(textArrayResId);
        return new myArrayAdaptor<CharSequence>(context, textViewResId, strings);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        return SetColourWhite(super.getView(position, convertView, parent));
    }

    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {
        return SetColourWhite(super.getView(position, convertView, parent));
    }

    private View SetColourWhite(View v) {
        if (v instanceof TextView) ((TextView)v).setTextColor(Color.rgb(0xff, 0xff, 0xff)); // white
        return v;
    }
}

Then with the simple styles.xml

<resources>
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    </style>
</resources>

I can substitute the class myArrayAdaptor

SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(this, R.array.action_list, android.R.layout.simple_spinner_dropdown_item)

and the text color will always be white. But isn't there a simpler way of doing this using settings in the styles.xml file?

Answer 3

Java code

SpinnerAdapter adapter = ArrayAdapter.createFromResource(this,
        R.array.actions,R.layout.dropdown_textcolor);

// OnNavigationListener
OnNavigationListener callback = new OnNavigationListener() {

    String[] items = getResources().getStringArray(R.array.actions); 
    public boolean onNavigationItemSelected(int position, long id) {

        // Do stuff when navigation item is selected
        Log.d("NavigationItemSelected", items[position]); // Debug
        return true;
    }

};


ActionBar actions = getSupportActionBar();
actions.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
actions.setDisplayShowTitleEnabled(false);

actions.setListNavigationCallbacks(adapter, callback);

Xml dropdown_textcolor.xml

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/text1"
    style="?android:attr/spinnerDropDownItemStyle"
    android:singleLine="true"
    android:layout_width="match_parent"
    android:textColor="@android:color/white"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:ellipsize="marquee"
    android:textAlignment="inherit"/>

Answer 4

If you are using AppCompat support library .. this might help you..

<style name="MyActionBar3" parent="@style/Widget.AppCompat.Light.ActionBar">
    <item name="android:background">@color/ActionBarBackground</item>         
</style>

<style name="MyActionBarDropDownStyle" parent="">
    <item name="android:background">#00FF00</item>        
    <item name="android:divider">#ff0000</item>
    <item name="android:dividerHeight">1dp</item> 
    <item name="android:textColor">#FFFFFF</item>     
    <item name="android:textSize">10sp</item>
</style>

<style name="MyTextStyle" parent="@style/Widget.AppCompat.Light.Base.ListPopupWindow">
    <item name="android:popupBackground">#FF0000</item>        
</style>

Answer 5

Add this in your styles.xml that will change the color of your hidden action menu text:

<style name="AppTheme.AppCompat.Light" parent="@android:style/Theme.Holo.Light.DarkActionBar"> 
        <item name="android:itemTextAppearance">@style/MenuTextAppearance</item>    
</style>

<style name="MenuTextAppearance">
        <item name="android:textColor">@android:color/black</item>
</style>

Answer 6

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- Customize your theme here. -->
        <item name="android:textColor">#ffffff</item>

        <item name="android:itemBackground">#991005</item>

        <item name="android:actionBarSize">40dp</item>

        <item name="android:divider">#ff0000</item>
        <item name="android:dividerHeight">1dp</item>

        <item name="android:textSize">14sp</item>



    </style>
</resources>