Styling the ActionMode Overflow Menu

Styling the overflow menu of an ActionMode is a very specific task that is surprisingly sparsely documented. Determining the correct style to apply to a specific widget in an Android app can often be a daunting task that traverses a deep rabbit hole.

If your app is keeping up with the times and you’re using the appcompat-v7 support library, your app’s theme is some variant of Theme.AppCompat, your Activities extend AppCompatActivity, and you may have switched to using Toolbar instead of an Action Bar.

Toolbar as Action Bar

You set the Toolbar in your layout to act as your action bar with

setSupportActionBar(toolbar);

One of the first steps in setting up your app’s theme is selecting a primary color.

<style name="AppTheme" parent="Theme.AppCompat">
 <item name="colorPrimary">@color/primary_app_color</item>
</style>

Which will style our Action Bar/Toolbar like this:



Starting an ActionMode

You activate an ActionMode with

import android.support.v7.view.ActionMode;

private ActionMode actionMode;

private void startMyActionMode() {
 actionMode = startSupportActionMode(new CustomActionCallback());
}

private class CustomActionCallback implements ActionMode.Callback {
 @Override
 public boolean onCreateActionMode(ActionMode mode, Menu menu) {
 return false;
 }

 @Override
 public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
 return false;
 }

 @Override
 public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
 return false;
 }

 @Override
 public void onDestroyActionMode(ActionMode mode) {

 }
}

When we start our ActionMode, we get an overlay over our Action Bar/Toolbar like this:

The overflow menu for this ActionMode uses colorPrimary as its default background.

How to style the ActionMode overflow menu

So how do you style the text and background of an ActionMode overflow menu being displayed on top of a Toolbar being used as a support Action Bar? Here’s how.

<style name="AppTheme" parent="Theme.AppCompat">
 <item name="actionBarPopupTheme">@style/ActionModeOverflowMenu</item>
</style>

<style name="ActionModeOverflowMenu" parent="Widget.AppCompat.ListPopupWindow">
 <item name="android:textColor">@color/actionmode_overflow_menu_text</item>
 <item name="android:background">@color/actionmode_overflow_menu_background</item>
</style>

After we apply the new ActionModeOverflowMenu to our theme, the overflow menu colors are now customized the way we want them.

The Android style rabbit hole

The difficulty in getting certain styles to correctly apply to your app lies in determining what magical incantation of style attributes and parent styles to extend and if you are using the appcompat-v7 support libraries (which you almost certainly should be doing). You will need to do the following:

• Set the correct attribute in your theme (actionBarPopupTheme)
• Have your style extend the correct parent style (Widget.AppCompat.ListPopupWindow)
• Override the correct attributes in the style (android:textColor, android:background)

In this case, we leave the android: prefix off of actionBarPopupTheme since it is a support-compatibility attribute but we leave it on ActionModeOverflowMenu’s attributes. Often only through trial and error will you discover what attributes need to be prefixed with “android:” and which ones don’t, and in what circumstances.

Style attributes are often not well defined or documented, so it is often helpful to make use of your IDE’s (IntelliJ or Android Studio) ability to follow style declarations (by pressing Ctrl/Command and clicking on them). You will find yourself using this extensively to determine what built-in Android attributes you will need to override and what built-in Android styles you will need to set as your new style’s parent style.