Toolbar options menu background color

Question

I am using the toolbar for android. I just want to change the background color of the overflow menu. But it is not changing.

Style xml

<style name="MyDarkToolbarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="popupTheme">@style/PopupMenuStyle</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

<style name="PopupMenuStyle" parent="android:Widget.Holo.Light.PopupMenu">
    <item name="android:popupBackground">@android:color/white</item>
</style>

Toolbar XML

    <android.support.v7.widget.Toolbar
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ColorPrimary"
    android:elevation="2dp"
    android:theme="@style/MyDarkToolbarStyle" />

Apurva · Accepted Answer · 2015-08-25T19:52:14.557

79

To change the toolbar options menu color, add this to your toolbar element

app:popupTheme="@style/MyDarkToolbarStyle"

Then in your styles.xml define the popup menu style

<style name="MyDarkToolbarStyle" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:colorBackground">@color/mtrl_white_100</item>
    <item name="android:textColor">@color/mtrl_light_blue_900</item>
</style>

Note that you need to use colorBackground not background. The latter would be applied to everything (the menu itself and each menu item), the former applies only to the popup menu.

edited Aug 25 '15 at 19:52

answered Mar 17 '15 at 09:53

Apurva

7,871
7
40
59

I think the popupTheme property only works on API 21 and up – Ignacio Guerendiain Sep 21 '15 at 13:57
This didn't work for me, but [this](https://stackoverflow.com/questions/26554996/change-toolbar-color-in-appcompat-21) did. – Android Jan 05 '18 at 22:06
what if I want background with borders? – user25 May 03 '18 at 19:24
@CapitanNerd no, use support libraries... and it's `app:popupTheme`, not `android:popupTheme` – user25 Jul 06 '18 at 21:13
2

For me, `android:colorBackground` didn't work, but `android:background` did – Taylor Aug 13 '19 at 16:25

cozeJ4 · Answer 2 · 2015-03-17T09:58:49.820

Edit:

if you just want a white overflow popup menu just do this

<android.support.v7.widget.Toolbar
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ColorPrimary"
    android:elevation="2dp"
    app:theme="@style/MyDarkToolbarStyle"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"" />

and remove the redundant popupTheme your Style xml

<style name="MyDarkToolbarStyle" parent="Widget.AppCompat.Toolbar">
     <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

You should also include this in your top (parent) Layout

xmlns:app="http://schemas.android.com/apk/res-auto"

No, the toolbar is from the Support Library and is backwards compatible — Kuffs, Sep 24 '15 at 18:53

score 10 · Answer 3 · answered Sep 11 '17 at 14:47

Simplest way

If you just want a white overflow popup menu just do this:

<android.support.v7.widget.Toolbar
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/ColorPrimary"
    android:elevation="2dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Also, take a look at the value of android:layout_height attribute.

Rakibul Islam · Answer 4 · 2023-05-13T15:25:45.660

This is how I changed the background color of the options menu for MaterialToolbar or Toolbar, I used the popupMenuBackground (android:colorBackground not work for API 21 or upper for me) attribute in a custom style and apply that style to the popupTheme attribute of the toolbar.

In layout file:

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_collapseMode="pin"
    app:menu="@menu/main_menu"
    app:popupTheme="@style/MenuStyle"
    app:title="@string/app_name" />

In styles.xml file:

<style name="MenuStyle" parent="Theme.MaterialComponents.Light">
    <item name="popupMenuBackground">@color/colorSecondary</item>
    <item name="android:textColor">@color/white</item>
</style>

Toolbar options menu background color

4 Answers4

Linked

Related