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...

That looks like a separate `View`. You might use Hierarchy Viewer or `uiautomatorviewer` to determine what that is. — CommonsWare, Feb 20 '16 at 17:07
@CommonsWare edited the question to include runtime view hierarchy information. — stkent, Feb 20 '16 at 17:51
Hmmm... I had expected that `View` to have stuck around and simply be hidden behind the real overflow. Unfortunately, Hierarchy View and `uiautomatorviewer` are only really good at static analysis. I'm not aware of any tools that use a `ViewTreeObserver` to try to do dynamic logging of this stuff, though I haven't played with Stetho yet and it might offer that. — CommonsWare, Feb 20 '16 at 18:10
Good thought; I'll follow up with Stetho investigations on Monday. Thanks! — stkent, Feb 20 '16 at 18:49
Apologies for the delay. Stetho does not seem able to 'see' the overflow menu views as it is displayed in a separate `Window`. It also seems restricted to static analysis, as far as I can tell. — stkent, Mar 09 '16 at 00:51

score 3 · Accepted Answer · edited May 23 '17 at 12:01

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>

Ah, good link! Did you mean to use `style` rather than `android:theme` in the `Toolbar` xml? — stkent, Mar 09 '16 at 15:41
@stkent The use of `style` here is optional. If you want to reuse the toolbar, you can extract the attributes like `background`, `theme`, `popupTheme` etc., to a custom `style` and reuse it. — blizzard, Mar 09 '16 at 15:54
Yes, makes sense. I didn't need to specify `android:textColorPrimary` in the toolbar theme (setting the dark overlay theme meant it was already white) but other than that using this combination of attributes verbatim fixed the issue. Thanks! — stkent, Mar 09 '16 at 16:09

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

1 Answers1