9

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.

enter image description here

Siavash
  • 7,583
  • 13
  • 49
  • 69
  • I think you might want to remove `android:theme="@style/AppTheme"` from the `Toolbar` declaration on `activity_main`, and set the background of the toolbar like `android:background="?attr/colorPrimary"` – Emmanuel Apr 24 '15 at 13:14
  • [This](http://stackoverflow.com/a/32981192/5164200) is how I solved my problem. Check it out – Fred Oct 06 '15 at 23:09
  • What worked for me was to [set the app theme in the manifest file](http://stackoverflow.com/a/39341616/3681880). – Suragch Sep 06 '16 at 06:07

4 Answers4

7

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.

ch3tanz
  • 3,070
  • 3
  • 16
  • 24
  • 1
    do you think this is a bug or miscommunication in the appcompat documentation? – Siavash Apr 24 '15 at 04:44
  • I don't think so. You are creating your custom theme. And they have given background property to specify the color. This is not actionbar. – ch3tanz Apr 24 '15 at 04:58
  • I chose this as best answer because its the only answer that acknowledged the fact that I already know how to set the background color manually. – Siavash Apr 24 '15 at 19:11
  • @ch3tanz I see that for background you have set @color/primary.. I see that there has been usage of ?attr/colorPrimary.. However on using it I am not able to get color on v21 and above. Any help? – Tejas Sherdiwala Apr 14 '16 at 12:36
  • @Tejas you have to define styles.xml for v21 and above , then you will get color. – ch3tanz Apr 14 '16 at 14:41
6

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">
Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
4

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).

tknell
  • 9,007
  • 3
  • 24
  • 28
0

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>
N J
  • 27,217
  • 13
  • 76
  • 96