Develop Reference

Overflow menu background color is gone after changing styles to MaterialComponents

At first, My app use <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> style. But I changed it to Material Components <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> (in order to use the tab's badge count of Material). So the style after changing is like this:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/green</item>
<item name="colorPrimaryDark">#color/green</item>
<item name="colorAccent">#color/green</item>
</style>
After changing the style, the overflow menu background is now white. (It was green background with white text before with Theme.AppCompat.Light.DarkActionBar). But now the background is white, and the text is also white.
Here is the xml for the toolbar:
<androidx.appcompat.widget.Toolbar
android:id="#+id/ev_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ToolbarTheme">
</androidx.appcompat.widget.Toolbar>
and theme style of the toolbar:
<style name="ToolbarTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:colorBackground">#color/green</item>
</style>
I tried setting <item name="popupMenuStyle">#style/CustomPopup</item> in the AppTheme with
<style name="CustomPopup" parent="#style/Widget.MaterialComponents.PopupMenu">
<item name="android:popupBackground">#color/green</item>
</style>
but still no luck.
The device I use to test uses Android 8.0, compileSdkVersion and targetSdkVersion is 28.
Thank you for your time.

The background color of the popup in overflow menu is defined in the app theme by the attribute actionOverflowMenuStyle.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="actionOverflowMenuStyle">#style/Widget.MaterialComponents.PopupMenu.Overflow</item>
</style>
The 1.2.0-alpha02 fixed a mixing between light and dark theme for this value.
You can also customize the popup using:
<com.google.android.material.appbar.MaterialToolbar
app:popupTheme="#style/AppTheme.PopupOverlay"
../>
with:
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:popupBackground">#drawable/...</item>
</style>
You can also override the color without changing the drawable using the android:theme attribute in the Toolbar
<com.google.android.material.appbar.MaterialToolbar
android:theme="#style/MyThemeOverlay_Toolbar"
../>
Using:
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="colorSurface">#color/custom</item>
</style>

Another twist to the accepted answer above using MaterialComponents.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="actionOverflowMenuStyle">#style/Theme.MyApp.PopupOverlay3</item>
</style>
<style name="Theme.MyApp.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.MyApp.PopupOverlay3" parent="#style/Widget.MaterialComponents.PopupMenu.Overflow">
<item name="android:popupBackground">#color/black</item>
<item name="android:actionMenuTextColor">#color/white</item>
</style>
<style name="Theme.MyApp.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.MyApp.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
the key is, as you say the actionOverflowMenuStyle attribute is the key to success. Set this to a style which uses the Widget.MaterialComponents.PopupMenu.Overflow style. And then change the attributes you want to customize for the overflow menu.
RG

you should add this code into toolbar, it will work
<androidx.appcompat.widget.Toolbar
android:id="#+id/ev_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:minHeight="?attr/actionBarSize"
**android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light**">
</androidx.appcompat.widget.Toolbar>

Is is possible completely custom default ActionBar style?

In my activity, I use default ActionBar
<style name="AppTheme" parent="Theme.AppCompat"> and getSupportActionBar()
How can I custom the style of this ActionBar?
Change ActionBar color and title color
Align title to center
Add more top padding to ActionBar
For the color, I tried these two style, but it also change color of whole Activity, I just want to change ActionBar
<item name="colorPrimary"></item>
<item name="android:textColorPrimary"></item>
I alo tried actionBarStyle, but it is not working
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">#color/darkgray</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/gold</item>
<item name="android:textColorPrimary">#color/gold</item>
<item name="android:textColorSecondary">#color/darkgray</item>
<item name="android:windowBackground">#color/black</item>
<item name="android:colorBackground">#color/black</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/gray</item>
<item name="android:textColor">#color/black</item>
</style>

I suggest you to include the Toolbar in your layout and use the Theme.AppCompat.NoActionBar theme for your Activity :
Layout :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/yourColor">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/yourColor"
android:text="yourTitle" />
</android.support.v7.widget.Toolbar>
Manifest :
<activity
android:name="yourActivity"
android:theme="#style/Theme.AppCompat.NoActionBar" />

Toolbar ActionMode background pre Lollipop does not work

Toolbar ActionMode seems to ignore my style on devices pre Lollipop.
Here is my style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:textColorPrimary">#DD000000</item>
<item name="android:textColorSecondary">#8A000000</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
<!-- colorPrimary is used for the default action bar background -->
<!-- Set AppCompat’s color theming attrs -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/secondary</item>
<item name="colorAccent">#color/accent</item>
<item name="android:actionModeStyle">#style/Widget.ActionMode</item>
<item name="android:actionModeBackground">#drawable/toolbar_action_background</item>
<item name="android:actionModeCloseDrawable">#drawable/ic_arrow_back_white_24dp</item>
</style>
<style name="Widget.ActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="android:background">#drawable/toolbar_action_background</item>
<item name="android:titleTextStyle">#style/TitleTextStyle</item>
</style>
<style name="TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#fff</item>
</style>
And my toolbar xml
<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:elevation="4dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary" />
I've checked these questions:
How to specify dark action mode with my theme
Toolbar and Contextual ActionBar with AppCompat-v7
Unable to style action mode when using Toolbar
Expected behaviour, works fine on lollipop:
How it looks on kitkat:

Solved by specifying booth android namspace and without in my theme:
...
<item name="actionModeStyle">#style/ActionMode</item>
<item name="android:actionModeStyle">#style/ActionMode</item>
...
<style name="ActionMode" parent="Widget.AppCompat.ActionMode">
<item name="android:background">#drawable/toolbar_action_background</item>
<item name="background">#drawable/toolbar_action_background</item>
</style>

Look at your Toolbar's theme:
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
The first style, you didn't give a name. You missed some lines. Then, let's suppose the style which has no name, its name is ToolbarStyle which has a line of <item name="colorPrimary">#color/primary</item> which does matter. Then at your Toolbar layout, replace your app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" by app:theme="#style/ToolbarStyle". Then <item name="colorPrimary">#color/primary</item> will color your Toolbar's background. Are we clear now?

Android Support Toolbar colorControlNormal color

I would like to set my spinner drop down color to white, whilst keeping the other elements in my theme the default color. Here is the situation:
<android.support.v7.widget.Toolbar
android:layout_height="#dimen/action_bar_height"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ToolbarTheme.Base"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"/>
</android.support.v7.widget.Toolbar>
And the style is:
<!-- My base app theme -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/theme_tint</item>
<!-- <item name="colorControlNormal">#FFFFFF</item> -->
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:typeface">sans</item>
<item name="android:windowBackground">#color/background_primary</item>
</style>
<!-- My Toolbar theme -->
<style name="ToolbarTheme.Base" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#FFFFFF</item>
</style>
If I was to put <item name="colorControlNormal">#FFFFFF</item> in the App theme (commented out above) then the spinner drop down will do to white BUT the checkbox will also turn white. So how can I get the spinner ONLY to go white?

Finally, I have found a solution on how to change arrow color of Spinner to white.
1) In styles.xml, add the following style:
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#ffffff</item>
<item name="colorControlNormal">#ffffff</item>
<item name="colorControlHighlight">#ff33b5e5</item>
</style>
<style name="Widget.MyTheme.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:theme">#style/ActionBarThemeOverlay</item>
</style>
2) In the layout, where you use the Spinner (in your case with Toolbar), add the style to your spinner:
<Spinner
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_spinner"
style="#style/Widget.MyTheme.HeaderBar.Spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

Just stumbled across this questions. Even though it has been asked some time ago I just wanted to leave an answer that should work:
Toolbar *.xml
<android.support.v7.widget.Toolbar
<!-- leave the theme stuff out of here -->
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
Styles / Themes
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- your other attributes -->
<!-- following is used to tint the checkbox - purple for demo purpose -->
<item name="colorControlNormal">#2196F3</item>
</style>
<style name="MyToolbarStyle">
<item name="android:minHeight">?actionBarSize</item>
<item name="android:background">?colorPrimary</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/MyToolbarTheme</item>
</style>
<style name="MyToolbarTheme">
<!-- Used to tint the back arrow, menu and spinner arrow -->
<item name="colorControlNormal">#FFF</item>
</style>
Result
Note: I made the checkbox purple for demo purpose

Show ImageView partly behind transparent ActionBar

The Google Maps application has a transparent ActionBar, through which the map is visible.
I am able to set the transparency of the ActionBar using this:
<style name="Theme.MyTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
<style name="ActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#64000000</item>
</style>
But how can I show my ImageView behind the ActionBar?

You can enable overlay mode of the ActionBar. To do it you have to set (android:)windowActionBarOverlay item in the theme to true.
<style name="MyTheme" parent="Theme.Sherlock">
...
<item name="windowActionBarOverlay">true</item> <!-- for ActionBarSherlock -->
<item name="android:windowActionBarOverlay">true</item>
</style>

You can also set it at run-time:
requestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
This will the ActionBar a semi-transparent floating bar.
Like any requestWindowFeature..., this should be called before adding content.
After the setContentView, you can then set a background from your Drawable with this:
getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar_bg));
Change getActionBar with getSupportActionBar for ActionBarSherlock
actionbar_bg.xml with the root element of shape:
<solid android:color="#64000000" />
Although I find Tomik's solution great, this will be useful for those one-off cases for a few activities rather than an across the board style.

If someone needs the transparent bar but only for certain activities while using a solid one in the rest of them, it might be worth creating two different styles and using the manifest to get control over it:
<style name="MyThemeOverlay" parent="Theme.Sherlock">
...
<item name="windowActionBarOverlay">true</item> <!-- for ActionBarSherlock -->
<item name="android:windowActionBarOverlay">true</item>
<!-- any stuff common here, colours, etc -->
<!-- define the style for native ActionBar for Android 4 and higher -->
<item name="android:actionBarStyle">#style/myActionbarTransparent</item>
<!-- define the style for ActionBarSherlock -->
<item name="actionBarStyle">#style/myActionbarTransparent</item>
</style>
<style name="MyThemeNoOverlay" parent="MyTheme">
<item name="windowActionBarOverlay">false</item> <!-- for ActionBarSherlock -->
<item name="android:windowActionBarOverlay">false</item>
<!-- any stuff specific for no overlay activity action bars -->
<!-- define the style for native ActionBar for Android 4 and higher -->
<item name="android:actionBarStyle">#style/myActionbar</item>
<!-- define the style for ActionBarSherlock -->
<item name="actionBarStyle">#style/myActionbar</item>
</style>
<style name="myActionbar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#color/white</item>
</style>
<style name="myActionbarTransparent" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#color/transparent</item>
</style>
and then in your AndroidManifest.xml you can either use one of them as default and the other one for some specific activities by doing something like:
<application
...
android:theme="#style/MyThemeOverlay">
...
<activity
android:name=".Activity1"
/>
<activity
android:name=".Activity2"
android:theme="#style/MyThemeNoOverlay"
/>
<activity
android:name=".Activity3"
/>
<activity
android:name=".Activity4"
android:theme="#style/MyThemeNoOverlay"
/>
...

in styles.xml:
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorPrimary">#color/semiTransparent5</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" >
<item name="windowActionBarOverlay">true</item>
</style>
in activity_main.xml:
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />