Android

Style Android's overflow menu using this sanity saving workaround

Styling the overflow menu on Android is poorly documented and hacky and can drive you mad. This workaround might save you hours of work and your sanity.

 

android_1024x768_020414.jpg
 

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

 

android_overflow_figa_020414.png
 

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

 

android_overflow_figb_020414.png
 

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. 

 

 

About William J. Francis

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

Editor's Picks

Free Newsletters, In your Inbox