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.

Being Intentional, Flexible and People-Focused in 2021
Team

Being Intentional, Flexible and People-Focused in 2021

October 19, 2020

MichiganLabs co-founder and managing partner, Joshua Hulst, sat down with Chelsea Dubey (Guest Writer) to share his insights for a strong start to the new year and the exciting technology trends that his team is tracking for 2021.

Read more
Alivia Howell named Delivery Practice Lead at MichiganLabs
Team

Alivia Howell named Delivery Practice Lead at MichiganLabs

February 11, 2021

Alivia has been named the Delivery Practice Lead and will join the leadership team at Michigan Software Labs.

Read more
MichiganLabs to double workforce as part of expansion
Team Press Release

MichiganLabs to double workforce as part of expansion

October 10, 2019

“As our clients continue to grow and evolve, we intend to serve them best by growing along with them,” explains Michigan Software Labs co-founder and managing partner, Mark Johnson. “Organizations are increasingly seeing how technology can serve their customers and grow their businesses. Developing the right custom software gives companies a clear market advantage.”

Read more
View more articles