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.

Bringing Agile Home
Miscellaneous

Bringing Agile Home

August 26, 2020

My life often resembles a game of Whack-A-Mole. The moment I complete one task two more pop up. To avoid getting behind, I jump on new tasks almost immediately. Then at some point along the way my wife will innocently ask if I’ve scheduled my appointment with the Secretary of State. Realizing that an up-to-date driver’s license takes priority over a squeaky hinge, I put down my tools and book my online appointment.

Read more
Putting a Kettle On: Server-Side Swift with Vapor
Development

Putting a Kettle On: Server-Side Swift with Vapor

March 23, 2020

One of my goals this year is to make a concerted effort to try out Vapor for server development. As a framework for making server applications in Swift, I’ve had my eye on Vapor since the 3.0 beta period many moons ago. The release of Vapor 4 seemed like as good a time as any to dive back in.

Read more
Iulia Rontu to join leadership team at MichiganLabs
Team

Iulia Rontu to join leadership team at MichiganLabs

February 4, 2021

Iulia will be joining the leadership team at MichiganLabs effective Monday, February 8, 2021. Iulia has been with MichiganLabs for 2 years in May of this year. She is currently the UX Practice Lead where she helps define our user experience practice to help transform and delight our clients.

Read more
View more articles