Style appcompat-v7 Toolbar menu background

Question

I'm trying to styling my appcompat-v7 toolbar to have a different background color for my overflow menu. I tried to use the themes for my app and styles for my toolbar, but I was not able to achieve it.

This is my toolbar:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"                                                                                                                              
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:layout_width="match_parent"
    app:theme="@style/AppToolbarTheme"
    android:layout_height="wrap_content">

Here is the style I created:

    <style name="AppToolbarTheme" parent="Theme.AppCompat.NoActionBar">
       <item name="android:textColorPrimary">@color/white</item>
       <item name="android:textColorSecondary">@color/cian</item>
    </style>

My main theme is extending Theme.AppCompat.Light.

Does anybody knows how can I do that? If is not possible using the styles is there any other way to achieve it?

Answer 1

Add this to your toolbar element

app:popupTheme="@style/ThemeOverlay.YourPopup"

Then in your styles.xml define the popup menu style

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

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

Note that you need to use android:colorBackground and never android:background. The latter would be applied to everything that doesn't have a background (here the menu itself and each menu item), the former applies only to the popup menu.

Update: The same applies to textColorPrimary and textColor.

• Popup menu item defines android:textColor="?android:textColorPrimary".
• android:textColorPrimary is a theme attribute, it's defined on themes.
• android:textColor is a style attribute, it's defined on widgets.
• If we defined android:textColor in a theme, it would be applied to every widget that doesn't define its own android:textColor.

Answer 2

You do not use the android namespace when you are using AppCompat attributes. Modify your code as follows:

<style name="AppToolbarTheme" parent="Theme.AppCompat.NoActionBar">
       <item name="textColorPrimary">@color/white</item>
       <item name="textColorSecondary">@color/cian</item>
</style>

Answer 3

Add this to your toolbar in your activity.xml file:-

app:popupTheme="@style/ThemeOverlay.YourApp"

And then in your styles.xml add this:-

<style name="ThemeOverlay.YourApp" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:colorBackground">@android:color/darker_gray</item>
        <item name="android:textColorPrimary">@color/TextColorPrimary</item>
    </style>