Develop Reference

Cannot alter Toolbar Text and Icon Colors

I've been struggling with this all day - I've been on Stack Overflow for hours trying various solutions to no avail.
The application I'm building uses the light material theme, yet the text on the toolbar refuses to change from anything but black. The toolbar itself colors perfectly.
styles.xml:
<resources>
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
</style>
<style name="Toolbar" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:background">#color/primary</item>
<item name="android:textColor">#color/white</item>
<item name="android:titleTextColor">#color/white</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:color">#color/white</item>
<item name="android:elevation">#dimen/toolbar_elevation</item>
</style>
</resources>
in the activity layout file:
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
style="#style/Toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:title="#string/app_name" />
Hoping someone can help solve this issue.

Add this to your Toolbar:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
Or perhaps, Adding this:
ThemeOverlay.AppCompat.Dark.ActionBar instead of ThemeOverlay.AppCompat.Dark you forgot to add ActionBar at the end i guess.
And of course, If you have AppBarLayout, Try to add this line in your AppBarLayout too:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
Texts will be white.
Otherwise, This answer will help:
Option 1) The quick and easy way (Toolbar only)
Since appcompat-v7-r23 you can use the following attributes directly
on your Toolbar or its style:
app:titleTextColor="#color/primary_text"
app:subtitleTextColor="#color/secondary_text"

Toolbar's custom text color is not used

I'm trying customize the ActionBar in my app. I want to change background color and text color.
My styles.xml is as below:
<resources>
<!-- Base application theme. -->
<style name="AppTheme.NoActionBar" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/actionbar_background</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.TitleTextStyle</item>
<!-- Support library compatibility -->
<item name="background">#color/actionbar_background</item>
<item name="titleTextStyle">#style/AppTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="AppTheme.ActionBar.TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/actionbar_text_color</item>
</style>
</resources>
In my AndroidManifest.xml I added android:theme="#style/AppTheme.NoActionBar". In my activity I added the action bar with code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/AppTheme.ActionBar" />
In result I have the action bar with correct color but incorrect text color.
What's wrong?
Note:
I'm using AppCompat, not Holo or other.

This is happening because your Toolbar's theme is set to light, hence the Android picks a dark (black) text colour.
You need to update it to following:
<style name="AppTheme.ActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="titleTextColor">#FF0001</item>
<item name="subtitleTextColor">#FF0001</item>
<!-- your other theme attributes -->
</style>
Notes:
For Toolbar themes, use ThemeOverlay instead of Theme.AppCompat. Related - When should one use Theme.AppCompat vs ThemeOverlay.AppCompat?,
replace #FF0001 with any colour you like. This is the colour of your title text.

maybe you should remove
actionBarTabTextStyle
from AppTheme.NoActionBar
hope it will help...

Why don't you directly use
<item name="android:textColor">#color/blue</item>
inside your custom MyActionBar style defination.

Instead of app:theme i am using android:theme which works for me.
Give it a try.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/MyActionBar" /> <----------Here

You can change the ActionBar text and background color through java code
yourToolbar.setTitleTextColor(Color.WHITE);
yourToolbar.setBackgroundColor(Color.YOUR_COLOR);

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.

Style appcompat-v7 Toolbar menu background

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?

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.

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>

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>

How do I style appcompat-v7 Toolbar like Theme.AppCompat.Light.DarkActionBar?

I'm trying to recreate the look of Theme.AppCompat.Light.DarkActionBar with the new support library Toolbar.
If I choose Theme.AppCompat.Light my toolbar will be light and if I choose Theme.AppCompat it will be dark. (Technically you have to use the .NoActionBar version but as far as I can tell the only difference is
<style name="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
Now there's no Theme.AppCompat.Light.DarkActionBar but naively I thought it'd be good enough to just make my own
<style name="Theme.AppCompat.Light.DarkActionBar.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
However with this my toolbars are still Light themed. I've spent hours now trying different combinations of mixing the Dark (base) theme and the Light theme but I just can't find a combination that will let me have light backgrounds on everything but the toolbars.
Is there a way of getting the AppCompat.Light.DarkActionBar look with import android.support.v7.widget.Toolbar's?

The recommended way to style the Toolbar for a Light.DarkActionBar clone would be to use Theme.AppCompat.Light.DarkActionbar as parent/app theme and add the following attributes to the style to hide the default ActionBar:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Then use the following as your Toolbar:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
For further modifications, you would create styles extending ThemeOverlay.AppCompat.Dark.ActionBar and ThemeOverlay.AppCompat.Light replacing the ones within AppBarLayout->android:theme and Toolbar->app:popupTheme. Also note that this will pick up your ?attr/colorPrimary if you have set it in your main style so you might get a different background color.
You will find a good example of this is in the current project template with an Empty Activity of Android Studio (1.4+).

Edit: After updating to appcompat-v7:22.1.1 and using AppCompatActivity instead of ActionBarActivity my styles.xml looks like:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
Note: This means I am using a Toolbar provided by the framework (NOT included in an XML file).
This worked for me:
styles.xml file:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
Update: A quote from Gabriele Mariotti's blog.
With the new Toolbar you can apply a style and a theme.
They are different!
The style is local to the Toolbar view, for example the background color.
The app:theme is instead global to all ui elements inflated in the Toolbar, for example the color of the title and icons.

Ok after having sunk way to much time into this problem this is the way I managed to get the appearance I was hoping for. I'm making it a separate answer so I can get everything in one place.
It's a combination of factors.
Firstly, don't try to get the toolbars to play nice through just themes. It seems to be impossible.
So apply themes explicitly to your Toolbars like in oRRs answer
layout/toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/Dark.Overlay"
app:popupTheme="#style/Dark.Overlay.LightPopup" />
However this is the magic sauce. In order to actually get the background colors I was hoping for you have to override the background attribute in your Toolbar themes
values/styles.xml:
<!--
I expected android:colorBackground to be what I was looking for but
it seems you have to override android:background
-->
<style name="Dark.Overlay" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">?attr/colorPrimary</item>
</style>
<style name="Dark.Overlay.LightPopup" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#color/material_grey_200</item>
</style>
then just include your toolbar layout in your other layouts
<include android:id="#+id/mytoolbar" layout="#layout/toolbar" />
and you're good to go.
Hope this helps someone else so you don't have to spend as much time on this as I have.
(if anyone can figure out how to make this work using just themes, ie not having to apply the themes explicitly in the layout files I'll gladly support their answer instead)
EDIT:
So apparently posting a more complete answer was a downvote magnet so I'll just accept the imcomplete answer above but leave this answer here in case someone actually needs it.
Feel free to keep downvoting if it makes you happy though.

The cleanest way I found to do this is create a child of 'ThemeOverlay.AppCompat.Dark.ActionBar'. In the example, I set the Toolbar's background color to RED and text's color to BLUE.
<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#FF0000</item>
<item name="android:textColorPrimary">#0000FF</item>
</style>
You can then apply your theme to the 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:layout_height="wrap_content"
android:layout_width="match_parent"
app:theme="#style/MyToolbar"
android:minHeight="?attr/actionBarSize"/>

To customize tool bar style, first create tool bar custom style inheriting Widget.AppCompat.Toolbar, override properties and then add it to custom app theme as shown below, see http://www.zoftino.com/android-toolbar-tutorial for more information tool bar and styles.
<style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="toolbarStyle">#style/MyToolBarStyle</item>
</style>
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#80deea</item>
<item name="titleTextAppearance">#style/MyTitleTextAppearance</item>
<item name="subtitleTextAppearance">#style/MySubTitleTextAppearance</item>
</style>
<style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">35dp</item>
<item name="android:textColor">#ff3d00</item>
</style>
<style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">30dp</item>
<item name="android:textColor">#1976d2</item>
</style>

Yout can try this below.
<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
<!-- your code here -->
</style>
And the detail elements you can find them in https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar
Here are some more:TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.
Hope this can help you.

Similar to Arnav Rao's, but with a different parent:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="toolbarStyle">#style/MyToolbar</item>
</style>
<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#ff0000</item>
</style>
With this approach, the appearance of the Toolbar is entirely defined in the app styles, so you don't need to place any styling on each toolbar.