Android menu overlay background color

androidandroid-appcompatbackgroundcolorsmenu

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…

Best Answer

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.