How do I customize menu item's background color?

Question

I'm trying to customize Toolbar's popup menu. Now I can not set background color of menu item.

My styles.xml looks like this:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme.NoActionBar" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>

        <item name="android:actionBarStyle">@style/AppTheme.ActionBar</item>
        <item name="android:actionMenuTextColor">@color/actionbar_text_color</item>
        <item name="android:dropDownListViewStyle">@style/AppTheme.DropDown</item>
        <item name="android:itemTextAppearance">@style/menuItemColor</item>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/AppTheme.ActionBar</item>
        <item name="actionMenuTextColor">@color/actionbar_text_color</item>
        <item name="dropDownListViewStyle">@style/AppTheme.DropDown</item>
        <item name="itemTextAppearance">@style/menuItemColor</item>
    </style>

    <style name="AppTheme.ActionBar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">\
        <item name="titleTextColor">@color/actionbar_text_color</item>
        <item name="subtitleTextColor">@color/actionbar_text_color</item>

        <item name="android:background">@color/actionbar_background</item>

        <!-- Support library compatibility -->
        <item name="background">@color/actionbar_background</item>
    </style>

    <style name="AppTheme.DropDown" parent="@style/Widget.AppCompat.Light.ListView.DropDown">
        <item name="android:background">@color/background_color</item>
        <!-- Support library compatibility -->
        <item name="background">@color/background_color</item>
    </style>

    <style name="menuItemColor">
        <item name="android:textColor">@color/inactive_text_color</item>
    </style>

</resources>

I added ActionBar to activity layout with code

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:theme="@style/AppTheme.ActionBar"/>

Note: I'm using AppCompat, not Holo or other.

I set theme in AndroidManifest application tag `android:theme="@style/AppTheme.NoActionBar"`. Should I set theme for activity too? — Yara_M, Sep 07 '16 at 07:06
What happens if you change that line to `android:theme="@style/Theme.AppCompat.Light.NoActionBar"`? Any change? — Sufian, Sep 07 '16 at 07:26
@Sufian Text color of action bar menu changes to default white. Every other colors still mine (except popup menu of course). — Yara_M, Sep 07 '16 at 07:36
An image if you need http://prntscr.com/cf3x1i Colors are acid for testing purposes. Color in dark frame is incorrect. App theme is mine, not `Theme.AppCompat.Light.NoActionBar` — Yara_M, Sep 07 '16 at 07:40
Never tried customizing menu items (custom bg or anything like that), however it is possible to set its theme as light (white) or dark (dark gray). These are possible by adding `app:popupTheme="@style/ThemeOverlay.AppCompat.Light"` to Toolbar tag, which will change the menu popup (when 3 dots are clicked) to light/white colour. If it doesn't work, update your question with your `Toolbar` tag and the styles.xml portion which you're using in there. — Sufian, Sep 07 '16 at 08:34
I'd like to add an important point here. You should not use add `"android:background"` in `AppTheme.ActionBar` (which is a Toolbar theme) because this will set the backgrounds of all items inflated inside Toolbar. You may have noticed that the background colour of the title text when you pressed down the back button (in Toolbar) or the background of menu item's text when holding it down. This problem has been explained by Chris Banes in [this answer](http://stackoverflow.com/questions/26490126/appcompat-style-background-propagated-to-the-image-within-the-toolbar/26508436#26508436). — Sufian, Sep 14 '16 at 02:51
Also check [this question](http://stackoverflow.com/questions/36554879/how-to-apply-a-theme-to-an-android-toolbar). I think it is relevant to your problem. — Sufian, Nov 23 '16 at 14:44

score 0 · Answer 1 · answered Sep 07 '16 at 06:44

This may help you,create a style like,

<style name="PopupMenu" parent="@android:style/Widget.PopupMenu">
<item name="android:popupBackground">@android:color/white</item>

and add it to your main themes..

 <style name="AppTheme.NoActionBar" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
<item name="android:popupMenuStyle">@style/PopupMenu</item> <! added it here
    <item name="android:actionBarStyle">@style/AppTheme.ActionBar</item>
    <item name="android:actionMenuTextColor">@color/actionbar_text_color</item>
    <item name="android:textColor">@color/text_color</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/AppTheme.ActionBar</item>
    <item name="actionMenuTextColor">@color/actionbar_text_color</item>
</style>

<style name="AppTheme.ActionBar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">\
    <item name="titleTextColor">@color/actionbar_text_color</item>
    <item name="subtitleTextColor">@color/actionbar_text_color</item>
<item name="android:popupMenuStyle">@style/PopupMenu</item> <! added it here
    <item name="android:background">@color/actionbar_background</item>

    <!-- Support library compatibility -->
    <item name="background">@color/actionbar_background</item>
</style>

score 0 · Answer 2 · answered Sep 07 '16 at 06:44

You have to define style for Overflow Menu too like this :

<!-- OverFlow menu Styles -->
<style name="PopupMenuListView" parent="@style/Widget.AppCompat.Light.ListView.DropDown">
    <item name="android:divider">@color/sp_red_500</item>
    <item name="android:dividerHeight">1dp</item>
    <item name="android:background">@color/white</item>
</style>

and in your parent theme style( Base application theme.) define drop down menu style like this :

 <item name="dropDownListViewStyle">@style/PopupMenuListView</item>

I got an interesting result. The background of menu is white, but texts look like solid dark strips. — Yara_M, Sep 07 '16 at 07:03

How do I customize menu item's background color?

2 Answers2

Linked