Remove excess background color from menu overflow menu / exit animation?

Question

When I open the overflow menu in my application, I see a solid rectangle of the background color of the menu displayed behind the menu itself during the input / output animation. Here's an animation showing this (slowing down to 75% speed):

Having this extraneous color rectangle spoils nice input / output animations! How to remove it while retaining all other Toolbar styles?

---

Study

I read a bunch of answers on the Toolbar style on SO, as well as Chris Banes' own posts on this. The use of style / theme tags based on per-t24> seems to have changed over the last couple of years, making it difficult to find the final information anywhere.

I reproduced this using versions 22.1.0 through 23.2.0 (inclusive) from the support library.

---

Application 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 Analysis

As suggested by @Commonsware, I looked at the hierarchy of views at runtime. Editing Results:

The menu crashed (there is an overflow button, there is no mysterious additional rectangle):

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

The main hierarchy of application representations (as shown in the original Window ) does not change when comparing two states of (persistent) menus. Therefore, I assume that an additional rectangle is temporarily added to the main application window during menu animation and is immediately deleted after they are completed. I'm not sure why this would be done - maybe it's a hangover from an older (and now unused) method of showing and hiding the overflow menu? If my conclusion is correct, then this question can be solved if we can determine how to prevent this temporary behavior ...

Answer 1

Excerpt from Chris Ban's answer to a question about the AppCompat style background distributed to the image in the ToolBar

style = local on the toolbar
theme = global for everything that is overpriced in the toolbar

Based on the above message, it seems that the android:background attribute that you set in android:theme is causing the background color to add extra color during the animation.

I set the background in the toolbar directly and used the android:colorBackground attribute to set the background color for the popup. The animation seems to be working 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>