Android menu overlay background color

Question

So I was searching for a way to change my menu popup background color but I'm really out of ideas now... first, this is my toolbar:

 <android.support.v7.widget.Toolbar
    android:id="@+id/main_actionbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="2dp"
    app:elevation="2dp"
    app:theme="@style/MainActionBar"
    app:popupTheme="@style/MainActionBar.Popup"/>

and the 2 themes I applied without any background changes:

<style name="MainActionBar" parent="Widget.AppCompat.Light.ActionBar">
    <item name="android:background">@color/primary</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
</style>
<style name="MainActionBar.Popup" parent="Widget.AppCompat.PopupMenu">
    <item name="android:textColor">@color/primary_text</item>
</style>

This makes my item background color look blue because I set the primary and secondary color of my app to blue.

One solution I found to change the item menu color to white is setting android:background to a white color in my MainActionBar.Popup which looks like this:

Widget.AppCompat.PopupMenu with android:background set to @android:color/white

Although this does change the background color to white, it also renders the box behind the popup white before the animation starts, which ruins the animation.

Another option is setting android:itemBackground to a white color which looks like this:

Widget.AppCompat.PopupMenu with android:itemBackground set to @android:color/white

As you can see the animation looks fine now but the item background isn't completely white...

I tried android:popupBackground as well but it doesn't seem to have any effect.

I know this is a question asked a lot but I've read dozens of them, so I maybe it's just that I don't see an obvious mistake...

Solution

Change this:

<style name="MainActionBar.Popup" parent="Widget.AppCompat.PopupMenu">
    <item name="android:textColor">@color/primary_text</item>
</style>

With:

<style name="MainActionBar.Popup" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:colorBackground">Your Background Color</item>
    <item name="android:textColor">Your Text Color</item>
</style>

Remove the following from MainActionBar theme:

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

Add this attribute to Toolbar tag:

android:background="?attr/colorPrimary"

Hope this helps.

Comments

[BoroChief]

I just tried that. By default my menu has a blue background and white text. this is how it looks if I apply your changes with text set to black and background set to white: picture. As you can see changing the text color works but the background color doesn't :(

[tahsinRupam]

Your Toolbar background color setting in style is overriding your custom pop-up style. Try setting Background color in xml file under Toolbar Tag. I've tested it and is working. Check my edited answer ;)

[BoroChief]

wow, you're right. That works just how I wanted it! Thank you so much, you just saved my sanity! :D