Styling the ActionMode Overflow Menu
May 11, 2016Styling 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:
![](/uploads/blog/posts/action-bar.png)
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:
![](/uploads/blog/posts/action-mode.png)
The overflow menu for this ActionMode uses colorPrimary
as its default background.
![](/uploads/blog/posts/action-mode-overflow.png)
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.
![](/uploads/blog/posts/action-mode-overflow-fixed.png)
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.
Looking for more like this?
Sign up for our monthly newsletter to receive helpful articles, case studies, and stories from our team.
![User research: The heartbeat of successful development](https://gratis-creeper.transforms.svdcdn.com/staging/blog/user-research-thumbnail.jpg?w=1499&h=1499&auto=compress%2Cformat&fit=crop&dm=1721067598&s=735bab90826be2383eab3d4ed7e2a6c0)
User research: The heartbeat of successful development
July 15, 2024User research in software development is essential for success. Learn how consistently engaging in methods like user interviews, usability testing, and field studies throughout the product lifecycle, helps ensure your solutions align closely with user needs.
Read more![From bits to qubits: The future of quantum computing](https://gratis-creeper.transforms.svdcdn.com/staging/blog/quantum-computing-square_1080x1080_040424.jpg?w=4500&h=4500&auto=compress%2Cformat&fit=crop&dm=1720622704&s=2b77a86c87a7d1ca3d0f3c2fd5f6eaf4)
From bits to qubits: The future of quantum computing
July 10, 2024Learn how quantum computing, which uses qubits capable of representing both 0 and 1 simultaneously, revolutionizes data processing. Discover the impact it could have on industries like finance and pharmaceuticals by enhancing risk assessment, fraud detection, and drug discovery.
Read more