Search code examples
androidmenuandroid-toolbarmaterial-components-android

Material toolbar menu background padding and color


I migrated by app to Material design 1.5.0. I use following code for toolbar (simplified):

Inside Activity:

<include layout="@layout/toolbar_default" />

toolbar_default:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.MaterialToolbar
    ...
    app:theme="@style/defaultToolbarTheme"
    ...
    />

styles:

 <style name="defaultToolbarTheme" parent="Theme.MaterialComponents.NoActionBar">
     <item name="android:textColorPrimary">?app_toolbar_foreground_color</item>
     <item name="android:textColorSecondary">?app_toolbar_foreground_color</item>
     <item name="android:background">@drawable/item_background_menu</item>
     <item name="android:itemTextAppearance">@style/MyActionBar.MenuTextStyle</item>
 </style>

 <style name="MyActionBar.MenuTextStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Subtitle" />

item_background_menu:

<selector>
    <item android:drawable="@color/blue_click" android:state_pressed="true"/>
    <item android:drawable="@drawable/item_background_menu_drawable"/>
</selector>

item_background_menu_drawable:

<shape>
    <solid android:color="itemColor"/>
</shape>

colors:

<color name="itemColor">#1155a2</color>

Before the migration, toolbar menu looked like this:

enter image description here

After the migration, the toolbar list of menu items got some strange top and bottom borders/padding:

enter image description here

Can somebody tell how to change the color of this padding (currently it seems to be default grey used in Android menu), or even better, how to remove this padding? Thank you.


Solution

  • In order to remove this padding, change the android:popupBackground attribute of the popup menu style which is defined by actionOverflowMenuStyle attribute:

     <style name="defaultToolbarTheme" parent="Theme.MaterialComponents.NoActionBar">
        ...
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
     </style>
    
    <style name="OverflowMenuStyle" parent="Widget.MaterialComponents.PopupMenu.Overflow">
        <item name="android:popupBackground">@null</item>
    </style>
    

    Another solution if that didn't work: to back to the style of the legacy PopupMenu overflow which doesn't add this padding by default:

    <style name="OverflowMenuStyle" parent="Widget.AppCompat.PopupMenu.Overflow">
    </style>