Wrong text colours with Holo light theme and dark Action Bar when using spinner navigation

I battled with this issue this evening for a couple of hours. I found myself having to go to extraordinary lengths for something that I thought should have “just worked”.  I think an image best illustrates the issue (and not the ridiculous title of the article!)

Screen Shot 2013-12-26 at 20.38.45

As you can see the dark text on a dark background is very difficult to see and is definitely wrong.  This is a known issue and isn’t helped by poor documentation for the Action Bar which shows the wrong way to do things.  The solution is rather simple and it is that you should use getThemedContext() when you create the SpinnerAdapter that controls the drop-down navigation.

The wrong way

SpinnerAdapter navigationSpinnerAdapter = 
ArrayAdapter.createFromResource(
  this, R.array.lineNamesArray, 
  android.R.layout.simple_spinner_dropdown_item);

The correct way

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

When you use the correct context you should end up with something like this:

Screen Shot 2013-12-26 at 20.54.27

3 thoughts on “Wrong text colours with Holo light theme and dark Action Bar when using spinner navigation

  1. Thanks! Wow, you’re the only one on the entire web that’s made note of this detail. Very helpful. I do note that, even though we’re both using the same theme, the grey triangle on mine is dark and barely visible. Any ideas as to why?

  2. Thanks! Wow, you’re the only one on the entire web that’s made note of this detail. Very helpful. I do note that, even though we’re both using the same theme, the grey triangle on mine is dark and barely visible. Any ideas as to why?

    [whoops, should have marked to notify on response]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s