Remove extra background color rectangle from overflow menu enter/exit animations?

Question

When I open the overflow menu in my application, I see a solid rectangle of the menu background color displayed behind the menu itself throughout the enter/exit animations. Here's an animation showing this (slowed to 75% speed):

The presence of this extraneous colored rectangle spoils the nice enter/exit animations! How can I remove it while retaining all other Toolbar styling?

---

Research

I've read a bunch of answers on Toolbar styling on SO, and Chris Banes' own posts on the subject. It seems that usage of the style/theme tags on a per-View basis has changed in the past couple years, which has made it difficult to find definitive information anywhere.

I've reproduced this using versions 22.1.0 through 23.2.0 (inclusive) of the support library.

---

App files

styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="ToolbarStyle" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:background">@color/colorPrimary</item>
    </style>

</resources>

activity_main.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:style="@style/ToolbarStyle" />

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

---

Runtime View Analysis

As @Commonsware suggested, I took a look at the view hierarchy at run time. Editing in the results:

Menu collapsed (overflow button present, no mysterious extra rectangle):

Menu expanded (overflow menu views displayed in separate Window):

The main application view hierarchy (as displayed in the original Window) is unchanged when comparing the two menu (steady) states. My guess is therefore that the extra rectangle is temporarily added to the main application's window during menu animations, and immediately removed upon their completion. I'm not sure why this would be done - perhaps it's a hangover from an older (and now unused) method of showing and hiding the overflow menu? If my deduction is correct, then this question could be resolved if we can determine how to prevent this transitory behavior...

Answer 1

An extract from the Chris Bane's answer to the question AppCompat style background propagated to the Image within the ToolBar

style = local to the Toolbar
theme = global to everything inflated in the Toolbar

Based on the above post it seems, the android:background attribute you are setting in the android:theme is the reason for the extra background color during the animation.

I'd set the background to the toolbar directly and used the android:colorBackground attribute to set the background color for the popup. The animation seems to work fine.

Code:

activity_main.xml

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:theme="@style/CustomToolbarTheme" />

styles.xml

<style name="CustomToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:colorBackground">@color/colorPrimary</item>
    <item name="android:textColorPrimary">@android:color/white</item>
</style>