Android Toolbar color not being set by colorPrimary

Question

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.

Answer 1

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.

Answer 2

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">