Styling the ActionMode Overflow Menu

May 11, 2016

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.

Joseph Kreiser
Joseph Kreiser
Software Developer

Stay in the loop with our latest content!

Select the topics you’re interested to receive our new relevant content in your inbox. Don’t worry, we won’t spam you.

Josh Hulst on Michigan Software Labs and his journey as the Managing Partner
Team

Josh Hulst on Michigan Software Labs and his journey as the Managing Partner

March 18, 2020

Read the full interview with Josh Hulst from MobileAppDaily. Josh was featured in the March 2020 edition of the publication.

Read more
Chicago Roboto 2022 Retrospective
Android Development

Chicago Roboto 2022 Retrospective

August 11, 2022

Scott Schmitz shares some notes of interest from talks at Chicago Roboto 2022, an Android community conference, that took place August 1-2.

Read more
Bitcamp GR Event Photos
Team

Bitcamp GR Event Photos

March 25, 2019

BitCamp is a day-long opportunity for 7th & 8th grade girls to learn what it's like to be a software developer.

Read more
View more articles