CAB overflow menu custom style

Question

In my application I am showing a contextual action bar and because I don't have room for all the actions, some of them are accessed under the overflow menu button. Now I want to style the overflow menu and change its background. My theme inherits from Theme.AppCompat, and I have these styles defined:

<item name="android:popupMenuStyle">@style/PopupMenu</item>
<item name="android:listPopupWindowStyle">@style/PopupMenu</item>
<item name="android:dropDownListViewStyle">@style/DropDownListView</item>

<style name="PopupMenu" parent="Widget.AppCompat.PopupMenu">
    <!--<item name="android:popupBackground">@color/dark_color</item>-->
    <item name="android:textColor">?android:textColorPrimary</item>
    <item name="android:dropDownSelector">?popupItemBackground</item>
</style>

<style name="DropDownListView" parent="Widget.AppCompat.ListView.DropDown">
    <item name="android:listSelector">?popupItemBackground</item>
    <item name="android:divider">@null</item>
    <item name="android:dividerHeight">0dp</item>
</style>

The other menus in my application (overflow menus in action bar and other) are styled, but the contextual action bar's overflow menu is not. What should I do?

Answer 1

To change the overflow menu background, you'll need to override attribute actionOverflowMenuStyle:

<!-- add to your parent style -->
<item name="actionOverflowMenuStyle">@style/LStyled.PopupMenu.OverflowMenu</item>

<style name="LStyled.PopupMenu.OverflowMenu" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
    <!-- 'overlapAnchor' changes position of the popup -->
    <!-- true - popup will be shown over the overflow button -->
    <!-- false - popup will be shown below the overflow button -->
    <item name="overlapAnchor">false</item>
    <item name="android:popupBackground">@drawable/bg_cab_popup</item>
</style>

Drawable bg_cab_popup can be any kind of drawable. But, using a 9-patch makes sense.

If you need to change anything other than the background, please leave me a comment.

Answer 2

I finally have a solution. It seems that you need to add this to your theme:

<item name="actionBarPopupTheme">@style/ThemeOverlay.My</item>

Where:

<style name="ThemeOverlay.My" parent="ThemeOverlay.AppCompat">
    <item name="android:colorBackground">@color/my_theme_background</item>
</style>

The colorBackground attribute can take any color value that you like and with this you have the contextual action button's overflow menu styled.

Answer 3

I'm going to assume you're using the latest (21.x.x) appcompat-v7 library and have adpoted the new Toolbar widget. To achieve what you want you don't modify your main app theme (except for the text selection action mode) but apply a style to the Toolbar element in your layout (style="@style/Widget.YourApp.Toolbar"). The style definition may look similar to this:

<style name="Widget.YourApp.Toolbar" parent="Widget.AppCompat.Toolbar">
  <item name="android:background">#111</item>
  <item name="android:elevation" tools:ignore="NewApi">8dp</item>
  <item name="theme">@style/ThemeOverlay.YourApp.ActionBar</item>
  <item name="popupTheme">@style/ThemeOverlay.YourApp</item>
</style>

For what you're trying to achieve the popupTheme is the most important attribute. It points to another style definition which will describe the look of the toolbar's popup menu.

<style name="ThemeOverlay.YourApp" parent="ThemeOverlay.AppCompat">
  <item name="android:colorBackground">#f00</item>
  <item name="android:textColor">#ff0</item>
</style>

Important: Notice that you'll be using this as a theme not a style. When you apply a style the attributes are set only to the one layout element you specify it at. When you apply a theme the attributes propagate to all its children. That's why when using themes you never override the background (which would cause overdraw and undesired looks) in favor of more specific attributes like windowBackground or colorBackground (which apply only to the relevant top element).

To make this example complete I'll include a toolbar theme as well:

<style name="ThemeOverlay.YourApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
  <!-- these color action bar title and subtitle -->
  <item name="android:textColorPrimary">#00f</item>
  <item name="android:textColorSecondary">#0ff</item>
  <!-- this colors the icons (apply manual tinting for non-appcompat icons programmatically) -->
  <item name="colorControlNormal">#0f0</item>
  <!-- bug in the library - the overflow icon on Lollipop will now respect the above -->
  <item name="android:colorControlNormal" tools:ignore="NewApi">?colorControlNormal</item>
  <!-- these color the text of action items -->
  <item name="actionMenuTextColor">?colorControlNormal</item>
</style>

Remember: When using custom text colors, use a selector and define the disabled color as well (doubly so if you're using the color on a button or in a menu).

EDIT

The above solution is said not to apply to contextual action bar or action mode popup. I found out that it's controlled by the following attribute defined on the activity theme:

<item name="actionModePopupWindowStyle">?attr/popupWindowStyle</item>

The default value points to @style/Widget.PopupMenu which is defined as follows:

<style name="Widget.PopupWindow">
    <item name="popupBackground">@drawable/editbox_dropdown_background_dark</item>
    <item name="popupAnimationStyle">@style/Animation.PopupWindow</item>
</style>

Create a custom style based on Widget.PopupWindow and point to it from actionModePopupWindowStyle.