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.