Develop Reference

Android Toolbar color not being set by colorPrimary

according to the google docs, I should be able to set the color of Toolbar background using colorPrimary in the theme, but it's not working. Here's what I have:
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/light_purple</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/dark_purple</item>
<!-- colorAccent is used as the default value for colorControlActivated,
which is used to tint widgets -->
<item name="colorAccent">#color/dark_purple</item>
<item name="colorSwitchThumbNormal">#color/light_purple</item>
</style>
</resources>
activity layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="#style/AppTheme"
tools:showIn="#layout/activity_main">
<TextView
android:id="#+id/pivot_title_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="toolbar text view" />
</android.support.v7.widget.Toolbar>
...
</LinearLayout>
Activity:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
I have set my app theme to AppTheme in the manifest: android:theme="#style/AppTheme" >
I have setup android support appcompat in build.gradle
compile 'com.android.support:appcompat-v7:22.1.0'
But my toolbar, is still not colored.
I know I can manually set the toolbar background color manually in the layout file, but shouldn't it get its color from the theme? as you can see the accent colors are working.

Toolbar will not get primary color from your theme. You have to set the following xml property of the toolbar
android:background="#color/primary"
This is my working implementation of toolbar.
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:background="#color/primary"
android:minHeight="?actionBarSize">
</android.support.v7.widget.Toolbar>
Hope it works for you too.

Style and theme are different.
The style is local to the Toolbar view, for example the background color.
The theme is instead global to all ui elements inflated in the Toolbar, for example the color of the title and icons.
More info here.
With Material Components Library:
the android:background attribute in the layout:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
apply the default style: style="#style/Widget.MaterialComponents.Toolbar.Primary" or customize the style inheriting from it:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
override the default color using the android:theme attribute:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/MyThemeOverlay_Toolbar"
with:
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textColorPrimary">....</item>
<item name="colorPrimary">#color/.....
<item name="colorOnPrimary">#color/....</item>
</style>
With design support library:
<android.support.v7.widget.Toolbar
style="#style/HeaderBar"/>
where:
<style name="HeaderBar">
<item name="android:background">?colorPrimary</item>
</style>
Otherwise you can define the background for your Toolbar.
<android.support.v7.widget.Toolbar
android:background="?attr/colorPrimary">

You have to use android: prefixed attributes in the theme for android 5+, as the non-prefixed variant is only for the app compat parts for versions < android 5.
So you should have one values/styles.xml for pre-android 5 and one values-v21/styles.xml for android 5+.
In the v21 styles you define your theme as following:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#color/light_purple</item>
<item name="android:colorPrimaryDark">#color/dark_purple</item>
<item name="android:colorAccent">#color/dark_purple</item>
</style>
As you now define the colorPrimary attribute once simply as colorPrimary for pre-Lollipop and once as android:colorPrimary for Lollipop devices, you can no longer directly use ?attr/colorPrimary. Instead, like others here said before, you should define your own style for the toolbar, but for both variations:
values/styles.xml:
<style name="Toolbar">
<item name="android:background">?attr/colorPrimary</item>
</style>
values-v21/styles.xml:
<style name="Toolbar">
<item name="android:background">?android:attr/colorPrimary</item>
</style>
And use the style for your toolbar:
<android.support.v7.widget.Toolbar
style="#style/Toolbar"
Like this the background color and other styles can be set on all versions and is still changeable by the colorPrimary that is set in the theme(s).

Try to set background color to toolbar
This worked for me
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/primary_color"
android:gravity="right"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<ProgressBar
android:id="#+id/pb_loading_news"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:visibility="gone" />
</android.support.v7.widget.Toolbar>

Tint CheckBox and Toolbar stuff separately

I'm currently using the usually amazing appcompat-v7 library in my application and I'm trying to tint my CheckBoxes without changing the Icon-Colors in the Toolbar (like the back arrow or those three dots).
Following how it looks currently - as you can see not only the CheckBox is tinted pink, the back-arrow / three-dots are also tinted pink.
My code:
Layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="?colorPrimary"
android:elevation="4dp" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="My CheckBox" />
</LinearLayout>
Application-Theme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#FFC107</item>
<item name="colorPrimaryDark">#FFA000</item>
<item name="android:textColorPrimary">#FFF</item>
<item name="android:textColorSecondary">#FFF</item>
<item name="colorControlNormal">#E91E63</item>
</style>
Question
What do I need to change so that the Checkbox gets pink and the Toolbar-stuff keeps being white?
Side-Note:
I guess the main problem is that I simply can't find a page where every single appcompat attribute is described. It's basically just all-out trial and error since the names of those attributes are no clear indication.

You're basically facing the same issue as described in this or this question.
So the only thing you need to do is to create a Style for your Toolbar which uses an other theme as the Activity.
Toolbar style / theme example
<style name="MyToolbarStyle">
<!-- potential other attributes -->
<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>
Add this Style to your Toolbar and your issue should be fixed (it is important not to use the theme directly):
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="?colorPrimary"
android:elevation="4dp" />

Android Toolbar: small title text in landscape mode

I'm testing the new Toolbar and AppCompat theme on Android and ran into a problem. My toolbar title text looks normal-sized on portrait mode but it became rather small on landscape mode although I didn't do anything in the code to change the title's text size. Here are the screen shots:
activity_main.xml:
<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.techfunmyanmar.jujaka.ui.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
If you're not building against API 17 or higher, use
android:layout_gravity="left" instead. -->
<!-- The drawer is given a fixed width in dp and extends the full height of
the container. -->
<fragment
android:id="#+id/navigation_drawer"
android:name="com.techfunmyanmar.jujaka.ui.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
<!-- Main application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
</style>
</resources>

I tried to set android:titleTextAppearance of the toolbar but the style wasn't being applied. Then I realized I'm using the AppCompat theme so I used app:titleTextAppearance and the style is now being applied. It looks like the small letters in landscape are a problem in the built-in AppCompat.Toolbar.Title style itself so I overrode it to set the font size manually. The final code:
Toolbar XML:
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:titleTextAppearance="#style/ToolbarTitle"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Toolbar Style:
<style name="ToolbarTitle" parent="#style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">20sp</item>
</style>

AOSP Issue #170707 was written regarding the change in text size for title and subtitle. Project Member response was "Works as intended. Identical to framework behavior." Although I don't find changing the text size to be the desirable default behavior, it sounds like the AppCompat engineers had to maintain consistency with the (flawed) framework behavior. Developers are then left to override the default styles as described in Chilly Chan's answer.
Additions to Chilly Chan's answer:
1) The subtitle text size can be controlled in a similar way by defining another style derived from TextAppearance.Widget.AppCompat.Toolbar.Subtitle.
2) Default values for title/subtitle size in portrait orientation are 20dp/16dp (on my Galaxy S3, 4.4.2.). Chilly Chan's example specifies "17sp". Use "sp" only if you want to let user preference setting affect title/subtitle size.

I was looking for a solution without custom Toolbar, but with custom style and this code did the trick for me:
styles.xml
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="titleTextStyle">#style/MyTitleTextStyle</item>
</style>
<style name="MyTitleTextStyle" parent="#style/TextAppearance.AppCompat.Title">
<item name="android:textSize">20sp</item> <!-- Default for portrait is 20sp and for landscape 14sp-->
</style>
AndroidManifest.xml
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:theme="#style/MyTheme"/>
Where the MainActivity extends AppCompatActivity; tested on API 19, 22 and 23.

Try to add this to your toolbar section under the activity_main.xml.
android:minHeight="?android:attr/actionBarSize"
I also noticed that you are using standard dark action bar , suggest to use Theme with no action bar , defined a new toolbar where
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
<android.support.v7.widget.Toolbar
android:id=”#+id/my_awesome_toolbar”
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:minHeight=”?attr/actionBarSize”
android:background=”?attr/colorPrimary” />

I think it has to do with some layout changes performed when you rotate the device, ast it looks like you can prevent the resize by adding something like
android:configChanges="orientation|screenSize"
in the AndroidManifest.xml for the activity you're in. As always, android:configChanges has more implications so should be used only if you really need it :)

Android Support v7 Toolbar setTitleTextAppearance not working

I am trying to change the font of the toolbar's title.
Here is my toolbar layout:
<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:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#666666"
app:titleTextAppearance="#style/MyText"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
And in my styles.xml
<style name="MyText">
<item name="fontPath">fonts/myFont.ttf</item>
</style>
If I do not set app:titleTextAppearance, the toolbar uses the system font. When I set it, the font gets smaller, but it is still in the system font. Am I doing something wrong?
Any suggestion, comments or answers much appreciated.
Edit:
I tried moving the style to styles-text.xml but no luck
Edit2:
For now, I am using a SpannableString and TypefaceSpan to make this work. Hope it helps someone.

This works:
<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:titleTextAppearance="#style/ActionBarTitleStyle"/>
Then have this in your styles.xml
<style name="ActionBarTitle" parent="android:Widget.TextView">
<!-- The action bar title font -->
<item name="android:fontFamily">sans-serif-light</item>
<!-- Customizes the color of the action bar title-->
<item name="android:textColor">#FF0000</item>
<!-- Customizes the size of the action bar title-->
<item name="android:textSize">24sp</item>
</style>

In my case, the font:family is only applied if I use "android:titleTextAppearance" instead of "app:titleTextAppearance" but this only works for api 21 or higher

AppCompat v21 Dark ToolBar style

I want my ToolBar to serve as an ActionBar and I want it to look like a light theme with a dark action bar. I can't seem to find the right combination to do it.
This is what I have in styles.xml
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/my_awesome_color</item>
<item name="android:textColorPrimary">#color/my_awesome_text_color</item>
<item name="colorPrimaryDark">#color/my_awesome_darker_color</item>
<item name="colorAccent">#color/accent</item>
</style>
And My toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize" />
Currently I get this
What I want is that the menu items be white as well
Is there an elegant solution or do I have to choose a custom style for each one of the toolbar's items? It seems there should be.

You can use the following theme on your Toolbar to get it to appear "dark". The first portion app:theme themes the color of the text on Toolbar to be light among other things. The app:popupTheme is for styling the overflow menu indicator to be light.
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="#dimen/triple_height_toolbar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />

I am sure am a bit late but to do that in your theme add:
<item name="android:textColorSecondary">my_awesome_text_color</item>