If you’ve never tried to style the overflow menu on Android‘s action bar, I’d
describe the experience somewhere between getting a root canal and the
unimaginable pain associated with sitting through I, Frankenstein for a second time.

Figure A is an image of the out-of-the-box overflow menu
user experience. My goal was to change the background color behind the word
Settings as well as the font color of the word Settings. After four hours of
reading forum posts and another four hours of trial and error, I managed to
piece together something that works on devices both with and without a hardware
key (in other words, Samsung and the rest of the Android world).

Figure A

 

 

The tutorial that follows will walk you through the short (and unintuitive)
process. Feel free to follow along or download and import the entire project into Eclipse.

1. Create a new Android project in Eclipse. Target Android 4.0 or above (API 14).

2. Create a blank activity when prompted by the wizard.

3. Open the /res/values folder and edit the styles.xml file.
We need to add a couple of items to the application theme. Make sure you’re
changing the application theme and not the application base theme or you’ll run
into problems with devices running Android API 11 and higher.

 

styles.xml
<resources>

<style name="AppBaseTheme" parent="android:Theme.Light">

</style>

<style name="AppTheme" parent="AppBaseTheme">
<item name="android:popupMenuStyle">@style/MyPopupMenu</item>
<item name="android:panelBackground">@android:color/holo_green_light</item>
<item name="android:actionBarWidgetTheme">@style/AppTheme</item>
</style>

<style name ="MyPopupMenu" parent="android:Theme.Holo.Light">
<item name="android:popupBackground">@android:color/holo_green_light</item>
</style>

</resources>

4. Open the MainActivity.java file in the /src folder and
override the onPrepareMenuOptions method. I know — groan. I tried everything
under the sun to change the text color in the XML, just as I tried everything
under the moon to change the background color in the dot java file.

 

Mainactivity.java
package com.authorwjf.overflowmenuswithstyle;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.ForegroundColorSpan;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
for (int i=0; i<menu.size(); i++) {
MenuItem mi = menu.getItem(i);
String title = mi.getTitle().toString();
Spannable newTitle = new SpannableString(title);
newTitle.setSpan(new ForegroundColorSpan(Color.BLUE), 0, newTitle.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
mi.setTitle(newTitle);
}
return true;
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

Now, let’s run the app again on our emulator (Figure B).

Figure B

 

 

Ta-da! I suspect at some point Google will fix
this oversight in the framework and add a straightforward mechanism for
achieving the desired results. Until that day, I’m glad to have a reliable
work-around.