?attr/ not setting right color in Toolbar

Question

I am using the same code from http://android-developers.blogspot.in/2014/10/appcompat-v21-material-design-for-pre.html for my project.

When I created a blank project to only test the Toolbar, the color is working as it should. However, after upgrading my project to material design using the same code, the Toolbar color becomes grey.

It seems android:background?attr/colorPrimary isn't loading the right color. When I use @color\theme_red, the color is properly set on the Toolbar.

What is going wrong here?

My colors.xml:

<?xml version="1.0" encoding="utf-8"?><resources>
    <color name="theme_red">#d43d1e</color>
    <color name="theme_red_dark">#aa3118</color>
    <color name="theme_accent">#3333ff</color>
</resources>

& styles.xml:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base"/>

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/theme_red</item>
    <item name="colorPrimaryDark">@color/theme_red_dark</item>
    <item name="colorAccent">@color/theme_accent</item>
</style>

& code for toolbar:

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"    />

How the toolbar looks like with android:background?attr/colorPrimary: How the toolbar looks like with @color/theme_red:

How it should be

UPDATE: I am updating the question as now I have another bug in the code which seems to be related. I tried the app on Android 5.0.2 phone & the statusbar did not tint with the darker shade even with correct theme & colors defined in the styles.xml. The statusbar has exactly same color as the Toolbar in the first image.

The styles.xml is above. The v-21/styles.xml is below:

 <resources>
  <style name="AppTheme" parent="AppTheme.Base">
  <item name="colorPrimary">@color/theme_red</item>
  <item name="colorPrimaryDark">@color/theme_red_dark</item>
  <item name="colorAccent">@color/theme_accent</item>
  <item name="android:windowContentTransitions">true</item>
  <item name="android:windowAllowEnterTransitionOverlap">true</item>
  <item name="android:windowAllowReturnTransitionOverlap">true</item>
  <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
  <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
  </style>
</resources>

Somehow, the colors are not being available to the system even after being defined properly.

The full project is available at:https://github.com/pauldmps/BPUTApp-AndroidStudio if anybody wants to take a look at the whole code.

Does it work if you remove `app:theme`? If it does, you may need to create a style that inherits from `ThemeOverlay.AppCompat.Dark.ActionBar` and set `colorPrimary` there. — Vikram, Mar 11 '15 at 17:01
No. Removing the app:theme causes the Toolbar to be pure grey with black text on it. Kinda like the default color for Toolbar. — Shantanu Paul, Mar 11 '15 at 17:06
Experiencing the same here... didn't find a solution yet. By any chance, did you clean the project? or the only thing you did was creating the two styles? — Stephane Maarek, Mar 16 '15 at 10:00
I did not clean the project. I just removed the the ActionBar & its related code & placed the Toolbar. — Shantanu Paul, Mar 17 '15 at 05:32

score 8 · Accepted Answer · answered Mar 25 '15 at 01:55

8

You've specified the wrong theme in your manifest:

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">

You should be using android:theme="@style/AppTheme".

answered Mar 25 '15 at 01:55

Vikram

51,313
11
93
122

1

Thanks! That fixed it. You'll get your bounty as soon as the time expires. – Shantanu Paul Mar 25 '15 at 05:17
Odd, [the Android guide for making an App Bar](https://developer.android.com/training/appbar/setting-up.html) told me to use this theme. Now you tell us that we should use the other theme and it works? I'm glad for the solution, but man the Android docs could be a bit better. – Nicholas Miller Sep 12 '16 at 05:03

score 0 · Answer 2 · answered Mar 11 '15 at 17:06

0

That's weird... Maybe try to use this as your styles.xml :

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/theme_red</item>
        <item name="colorPrimaryDark">@color/theme_red_dark</item>
        <item name="colorAccent">@color/theme_accent</item>
    </style>
</resources>

answered Mar 11 '15 at 17:06

Yomansk8

233
4
15

That didn't work. Its definitely weird because the same piece of code is working on a different project. Also is it a Support library bug? http://stackoverflow.com/questions/27210266/primary-color-sometimes-goes-transparent – Shantanu Paul Mar 11 '15 at 17:08

Xcihnegn · Answer 3 · 2015-03-11T18:09:21.953

0

If you want to use DarKActionBar as your AppTheme, you have to disable default actionBar by adding in your AppTheme:

<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>

they are needed for using widget ToolBar. However you have used NoActionBar for your AppTheme, then no need above two items, but you should set app:theme to be AppTheme in your ToolBar.

edited Mar 11 '15 at 18:09

answered Mar 11 '15 at 17:25

Xcihnegn

11,579
10
33
33

But what's your targetSDKVersion? 4.3? – Xcihnegn Mar 11 '15 at 17:31
No. Its the latest 5.0 – Shantanu Paul Mar 11 '15 at 17:35
Seems you do not need those two items because you have used `NoActionBar`, then if you remove `app:theme` or set it to be `AppTheme` from `ToolBar`, it should work. – Xcihnegn Mar 11 '15 at 18:03

John P. · Answer 4 · 2015-03-11T17:35:31.653

0

You are most likely experiencing this behavior because you are setting the theme of the Toolbar to ThemeOverlay.AppCompat.Dark.ActionBar in your XML file.

Try changing

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

To

app:theme="@style/AppTheme"

You may also want to specify a theme specifically for the Toolbar.

<!-- Exclusive theme for the Toolbar -->
<style name="Theme.Toolbar" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/yourColor</item>
    <item name="android:textColorPrimary">@color/yourTextColor</item>
</style>

edited Mar 11 '15 at 17:35

answered Mar 11 '15 at 17:26

John P.

4,358
4
35
47

This fixed the color but the text on the Toolbar is now black instead of the expected white as in the screenshot. The main problem is that the same code works in a separate project. – Shantanu Paul Mar 11 '15 at 17:32

score 0 · Answer 5 · answered Mar 16 '15 at 10:06

So I have no clue what kind of sorcery it is... But here is the fix that worked for me

In your values-v21/styles.xml, add these lines.

    <item name="colorPrimary">@color/theme_red</item>
    <item name="colorPrimaryDark">@color/theme_red_dark</item>
    <item name="colorAccent">@color/theme_accent</item>

I have no clue why the styles 21 doesn't inherit these properties... but oh well

?attr/ not setting right color in Toolbar

5 Answers5