Develop Reference

How to change toolbar text color from MaterialComponents.DayNight theme?

I am using MaterialComponents.DayNight theme in my app. In the day mode, toolbar text color is black. But when I switch to night mode toolbar text color is remain black, so it's not visible anymore.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
I want to change the toolbar text color into white in night mode. How can I do that?

Just use in your Layout (it works also with the androidx.appcompat.widget.Toolbar) the style:
<com.google.android.material.appbar.MaterialToolbar
style="#style/Widget.MaterialComponents.Toolbar.Primary"
Then define in the values-night/colors.xml the colorOnPrimary.
Then there are a lot of alternatives.
You can customize globally the style of the toolbar in the app theme with:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="toolbarStyle">#style/MyToolbar</item>
</style>
with:
<style name="MyToolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
<item name="titleTextColor">#color/.....</item>
</style>
and the define the color in the values/colors.xml and values-night/colors.xml.
Or just apply a style in the Toolbar
<com.google.android.material.appbar.MaterialToolbar
style="#style/MyToolbar"
or simply override the theme with:
<com.google.android.material.appbar.MaterialToolbar
android:theme="#style/MyThemeOverlay_Toolbar"
with:
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="colorOnPrimary">#color/...</item>
</style>

Set your parent theme to parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge"
By using this, you will keep your ActionBar's original theme with DarkActionBar attributes on top of the overal DayNight theme from MaterialComponents.

Add this entry to your theme:
<item name="android:itemTextAppearance">#style/PopupMenuTextAppearance</item>
After that, add the style accordingly to the styles.xml:
<style name="PopupMenuTextAppearance" parent="TextAppearance.AppCompat.Menu">
<item name="android:textColor">?attr/colorOnBackground</item>
</style>
?attr/colorOnBackground is available in the Material Components library. If you're not using that, you should be able to use ?android:attr/textColorPrimary instead.

in my opinion you should set the style on noActionbar and design new toolbar and customize it

I used these two lines of code inside the styles.xml file:
<item name="colorControlNormal">#android:color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
It changed the color on the toolbar text and the toolbar X icon to white.
The whole code looked like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#00695c</item>
<item name="colorPrimaryVariant">#439889</item>
<item name="colorOnPrimary">#ffffff</item>
<item name="colorSecondary">#007769</item>
<item name="colorSecondaryVariant">#48a697</item>
<item name="colorOnSecondary">#ffffff</item>
<item name="colorControlNormal">#android:color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
</style>
</resources>

Drawer icon color

So I found a lot of posts with similar question and I managed to change drawer icon color by adding in toolbar styles this line <item name="colorControlNormal">#android:color/white</item> but for it to work I need to add this line to toolbar xml android:theme="#style/ToolbarStyle" but my style changes in the code and that toolbar would pick primary color after I changed theme I cannot use android:theme in the toolbars xml so I wonder if it's possible to set toolbar theme in styles?
I tried this but still no results
Theme which I setting programatically
<style name="mytheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:toolbarStyle">#style/ToolbarStyle</item>
</style>
Toolbar style which has to apply to toolbar when I'm changing theme to mytheme
<style name="ToolbarStyle" parent="mytheme">
<item name="colorPrimary">#color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="colorControlNormal">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
Toolbars xml
<android.support.v7.widget.Toolbar
android:id="#+id/my_week_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"/>

So after playing with styles I figure out how to do that so instead of adding this line <item name="colorControlNormal">#android:color/white</item> to toolbar style I added it to mytheme style and it worked

Toolbar default style and Navigation Icon

I have a Toolbar inside an AppBarLayout.
Here is the XML of both views :
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/App.ThemeOverlay.Toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
With the theme :
<style name="App.ThemeOverlay.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
And the Theme applied to the Activity :
<style name="App.Theme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
Now, I want to apply a custom titleTextAppearance for the toolbar.
I know that I can use app:titleTextAppearance in my layout's XML but I want to configure it from the theme so that every Toolbar of my app will have the same style without setting the text appearance in every layout.
After a bit of digging in AppCompat source code, I found that Toolbar uses the toolbarStyle of the current theme as its default theme.
The default value of this style is Widget.AppCompat.ActionBar.
So my first guess is to override this style in my theme overlay, and change the titleTextAppearance in this new style :
<style name="App.ThemeOverlay.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="toolbarStyle">#style/App.Style.Toolbar</item>
</style>
<style name="App.Style.Toolbar" parent="Widget.AppCompat.ActionBar">
<item name="titleTextAppearance">#style/App.TextAppearance.Toolbar.Title</item>
</style>
<style name="App.TextAppearance.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textColor">#00FF00</item> (this is some green)
<item name="android:textAllCaps">true</item>
</style>
This actually overrides the titleTextAppearance of my toolbar but it's also breaking the navigation icon :
What is wrong with my configuration that breaks the navigation icon ?
For the record, I tried to remove the toolbarStyle of the theme overlay and used directly in the layout's XML of the toolbar style="#style/App.Style.Toolbar".
This correctly applies the title text appearance and it's not breaking the navigation icon, but this is not optimal as I would have to apply the style to every toolbar of my app, and that's what I'm trying to avoid from the beginning.
Thanks for the helps,
Pierre

Your default style should extend Widget.AppCompat.Toolbar, not Widget.AppCompat.ActionBar. After that it will work just fine.

AppCompat Toolbar: set toolbar theme from upper theme

I have a "light"-themed application with:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<!-- etc. -->
</style>
I want my Toolbars to be dark themed, so I have setup the following style, just as suggested by Chris Banes:
<style name="Theme.MyTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- stuff -->
</style>
Then, by adding android:theme="#style/Theme.ByodTheme.Toolbar" to my android.support.v7.widget.Toolbar, everything works as expected (even though the Android Studio preview doesn't show white colors for the title, it works on devices):
Now, instead of specifying android:theme for every Toolbar in my application, I'd like to specify the style in my main theme and forget about it. I have tried the toolbarStyle property, but it looks like it doesn't work as intended, since it completely messes up standard properties:
I have also made other attempts by making the Toolbar theme inherit from Widget.AppCompat.Toolbar, and by changing titleTextAppearance and subtitleTextAppearance, but then it looks impossible to change the overflow icon color (yes, I have tried to set actionOverflowButtonStyle and inherit that style from Widget.AppCompat.ActionButton.Overflow, with no success in changing the overflow icon color).
Is there a way to specify, from a single point, the main theme for every toolbar in my application?

You can use a custom attribute for this -- basically just set your toolbars to use a custom value that you'll define in the theme.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="?attr/toolbar_theme"
/>
The important part there is just android:theme="?attr/toolbar_theme" which references a custom attribute from the current theme.
You will need to declare this attribute somewhere, like so:
<resources>
<attr name="toolbar_theme" format="reference" />
</resources>
Then you can define what value you want the toolbar to use by assigning a value to toolbar_theme in your theme. For example, to make it use Theme.MyTheme.Toolbar you could define it like so:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<!-- etc. -->
<item name="toolbar_theme">#style/Theme.MyTheme.Toolbar</item>
</style>
The nice thing about using an attribute is that it lets your app have multiple themes, and that single toolbar resource will use whatever value you've set within the theme.

If I understand the question correctly, you want to set your app's theme once and apply all the styling to all the Toolbars in every activity/fragment.
If so, I would recommend this approach:
<style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:textColorPrimary">#color/MyColorPrimaryText</item>
<item name="android:windowBackground">#color/MyColorWindowBackground</item>
<item name="colorPrimary">#color/MyColorPrimary</item>
<item name="colorPrimaryDark">#color/MyColorPrimaryDark</item>
<item name="colorAccent">#color/MyColorAccent</item>
<item name="colorControlNormal">#color/MyColorControlNormal</item>
<item name="colorControlHighlight">#color/MyColorControlHighlight</item>
<item name="toolbarStyle">#style/MyToolbar</item>
<item name="windowActionModeOverlay">true</item>
<item name="actionModeBackground">#color/MyColorPrimaryDark</item>
</style>
<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:minHeight">#dimen/MyToolbarMinHeight</item>
<item name="android:gravity">center_vertical</item>
<item name="android:background">#color/MyColorPrimary</item>
<item name="android:elevation" tools:ignore="NewApi">10dp</item>
<item name="theme">#style/MyToolbarTheme</item>
</style>
<style name="MyToolbarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/MyColorPrimaryText</item>
<item name="colorControlNormal">#color/MyToolbarColorControlNormal</item>
<item name="colorControlHighlight">#color/MyToolbarColorControlHighlight</item>
</style>
Then in your manifest:
<application
android:name=".MyApp"
android:theme="#style/MyTheme">
<activity android:name=".MyActivity1"/>
<activity android:name=".MyActivity2"/>
</application>
Then in your activity layout files, include the toolbar with:
style="?attr/toolbarStyle"
So myActivity1.xml layout file would look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?attr/toolbarStyle" />
<!-- ETC. -->
</LinearLayout>
And notice that to change the navigation back button color or the overflow button colors, you can set:
<item name="colorControlNormal">#color/MyColorControlNormal</item>
<item name="colorControlHighlight">#color/MyColorControlHighlight</item>
And:
<item name="android:textColorPrimary">#color/MyColorPrimaryText</item>
Can be used to update the actionbar text color but you'd define it in the Toolbar theme.
Hope this helps.

AppCompat Toolbar: Change Overflow Icon Color in ActionMode

With the AppCompat Toolbar, I want to be able to change the color of the overflow menu icon on ActionMode change.
For example, the overflow icon will be white in normal Toolbar mode. And will turn black on ActionMode. So far, I have managed to change the background of the action mode as well as the title text. But I have yet to find a way to change the overflow menu icon color.
I know that there's an answer available:
Change ActionMode Overflow icon
I tried the first solution and I wasn't able to find the overflow icon.
The second solution, even with a 50L delay causes the overflow menu icon to flash the ActionMode's intended color for a brief split second that is very jarring.

Add the below line into your theme attribute:
<item name="android:textColorSecondary">#android:color/white</item>

This can be achieved by setting the android:textColorSecondary theme attribute.
For example, suppose you have the following toolbar, which uses the theme MyToolbarStyle:
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
theme="#style/MyToolbarStyle"
/>
Next, define the style MyToolbarStyle, inheriting from ThemeOverlay.AppCompat.ActionBar. Finally, modify the color of the overflow icon by adding an item for android:textColorSecondary:
<style name="MyToolbarStyle" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorSecondary">#333333</item>
</style>

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:actionOverflowButtonStyle">#style/ActionButton.Overflow.Icon</item>
</style>
<style name="ActionButton.Overflow.Icon" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">#mipmap/yourwanticon</item>
</style>

<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionOverflowButtonStyle">#style/ActionButtonOverflow</item>
<!-- Support library compatibility -->
<item name="actionOverflowButtonStyle">#style/ActionButtonOverflow</item>
</style>
<style name="ActionButtonOverflow" parent="#style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:tint">#color/brand_white</item>
</style>

Add this code on your res->styles.xml
<style name="ToolbarColored" parent="AppTheme">
<item name="android:textColorSecondary">YOUR_COLOR</item>
</style>
Then your 'ToolbarColored' style in your XML file like belove
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/ToolbarColored"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />

<style name="ToolBarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:tint">#color/colorAccent</item>
create the above theme.set tint with your color and add this theme to the toolbar.
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ToolBarTheme"/>

To correctly change the color of your toolbar's overflow menu icon, set your toolbar's theme to an AppCompat dark ActionBar theme. For example:
In your res/values/style.xml file create a theme that inherits from AppCompat in this manner:
<style name="AppTheme.MyThemeName" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
Now set your toolbar's theme to this theme:
<android.support.v7.widget.Toolbar
android:id="+id/my_toolbar_id
android:layout_width="match_parent"
android:layout_height="#dimen/my_toolbar_height"
android:theme="#style/AppTheme.MyThemeName">
</android.support.v7.widget.Toolbar>

None of the answers here helped me change the overflow icon color of ActionMode independently from the overflow icon color of the normal Toolbar (without resorting to case-by-case styling in code). After some trial and error, I thought that we might override theme attribute of ActionMode independently from Toolbar, and it worked!
In the base theme, we specify the style of action mode like usual:
<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.Bridge">
<item name="actionModeStyle">#style/ActionModeStyle</item>
</style>
In our custom ActionModeStyle we do whatever styling we want, and also specify a theme attribute:
<style name="ActionModeStyle" parent="#style/Widget.AppCompat.ActionMode">
<item name="theme">#style/ActionMode.Theme</item>
</style>
<style name="ActionMode.Theme" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:textColorSecondary">?attr/colorPrimary</item>
</style>
textColorSecondary will also change the back button color, but we can easily override that one using actionModeCloseButtonStyle.

First make your custom style
<style name="ToolbarColoredBackArrow" parent="AppTheme">
<item name="android:textColorSecondary">#color/white</item>
</style>
Then just add it into your toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:titleTextColor="#color/white"
app:theme="#style/ToolbarColoredBackArrow"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:background="?attr/colorPrimary" />

If you are using the toolbar in your activity xml you can use something like this
toolbar?.navigationIcon?.setColorFilter(ContextCompat.getColor(this, android.R.color.black), PorterDuff.Mode.SRC_ATOP)

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionOverflowButtonStyle">#style/CustomOverflowButtonStyle</item>
</style>
<style name="CustomOverflowButtonStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:tint">#color/black</item>
</style>

If you want the white overflow menu icon simply add
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" to your Toolbar layout code.
If you want the dark overflow menu icon use
android:theme="#style/Base.Widget.AppCompat.Light.PopupMenu"
So final code is something like:
<android.support.v7.widget.Toolbar
android:id="#+id/a_main_tb"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="#string/app_name"
app:titleTextColor="#ffffff"
/>
Also, you should understand that it will change the color of the menu items also.