Change Material Design AppCompat ActionBar Color

Question

I used to change AppCompat status bar color with actionBarStyle, and creating a style with a background which is the color I want.

Now, with Material Design AppCompat, this method doesn't work anymore.

Can you help me? Thanks.

Do you might be referring to ActionBar? Just to clear out what do mean. — Nikola Despotoski, Oct 18 '14 at 02:26
@NikolaDespotoski I've got an ActionBarActivity that must get AppCompat style. So, What i've done is adding to that AppCompat style an attribute called actionBarStyle, And the style that I set there had a background that changed the Action bar a different color. — user3184899, Oct 18 '14 at 02:30

reVerse · Accepted Answer · 2014-11-05T12:29:46.153

89

There's a new attribute called colorPrimary which you can define in your Theme. This will give you ActionBar or Toolbar a solid color.

Following a little example:

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">@color/my_action_bar_color</item>
</style>

Please note: It has to be only colorPrimary, not android:colorPrimary, in every values-folder except the values-v21 one.

You can read more about customizing the Color Palette on developer.android.com.

edited Nov 05 '14 at 12:29

answered Oct 19 '14 at 12:16

reVerse

35,075
22
89
84

1

Color primary is for Api 20+. When on Kitkat, this simply does nothing for me. – Paul Woitaschek Oct 19 '14 at 14:51
8

It's not. `colorPrimary` is part of the `v7-appcompat` so it's basically available for API-Level 7 and above (notice the parent `Theme.AppCompat`). – reVerse Oct 19 '14 at 15:02
wow that worked, thanks. Android Studio was confusing me because always autocompleting "android:colorPrimary". Anyway my DialogFragents etc all still have the old Holo design. How can I fix that? – Paul Woitaschek Oct 19 '14 at 15:13
As far as I know the Dialog-Theme isn't part of the `v7-appcompat` though it should be pretty easy to achieve this new dialog-style "manually". – reVerse Oct 19 '14 at 21:49
Spent all day trying to fix it, finally ended up here! Thank you :) Though may I ask, where exactly in documentation do you get such info? I'm sure Google Mentioned it somewhere. – JustADev Oct 20 '14 at 18:57
1

Check [Creating Apps with Material Design --> Maintaining Compatibility](https://developer.android.com/training/material/compatibility.html#SupportLib) there you can find an example. Yet I think there's currently no documentation describing the `colorPrimary`attribute explicitly. – reVerse Oct 20 '14 at 19:03
Thank you so much, your link is a great start to learn how compatibility works :) – JustADev Oct 20 '14 at 19:23
for me, the code above doesn't work. I have a null pointer exc on a getActionBar() if I apply this theme. For info, I do this with the DrawerLayout. Any idea why it's not working ? – Cocorico Oct 28 '14 at 15:31
It's hard to determine what's going wrong with this small "amount" of information. Maybe you should ask a new question. – reVerse Oct 28 '14 at 15:39
This is not working for me! I use Android Studio and for styles-v19.xml i was trying the same but nothing helped. ` ` @reVerse – Kavin Prabhu Nov 05 '14 at 11:50
1

@KevinChris you've used `android:colorPrimary` but what you actually need is only `colorPrimary` (without the `android:` prefix). Look again at my post. ;) – reVerse Nov 05 '14 at 12:18
Thanks dude! Didn't notice it well! Thanks :) But what about colorPrimaryDark for status bar? Its not working! – Kavin Prabhu Nov 05 '14 at 12:24
You can define `colorPrimaryDark` but naturally it won't have any effect for devices running an android version below Lollipop. – reVerse Nov 05 '14 at 13:04
If you want to change the Text color use `android:textColorPrimary` – Sami Eltamawy Jan 28 '15 at 14:13
Not working for me. http://stackoverflow.com/questions/29248542/change-status-bar-color-on-api-below-21-android – WISHY Mar 25 '15 at 06:29

score 2 · Answer 2 · answered May 19 '15 at 16:19

In my case, @reVerse had a partial answer. I had to make some additional changes to get colorPrimary to work, because I was customizing other parts of the toolbar... specifically, the text color.

Here is my working styles.xml file, with comments indicating what I was doing wrong:

<!-- As @reVerse mentioned, you need to use colorPrimary instead of android:colorPrimary -->
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/my_toolbar_color</item>
</style>

<!-- I was incorrectly using @style/Theme.AppCompat.Light for the popupTheme attribute -->
<style name="MyToolbarStyle" parent="Widget.AppCompat.ActionBar">
    <item name="theme">@style/MyToolbarTextStyle</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
</style>

<!-- I was incorrectly using Them.AppCompat.Light for the parent here -->
<style name="MyToolbarTextStyle" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">@color/my_toolbar_text_color</item>
</style>

So, when customizing more than the toolbar background color, you need to be sure to use one of the ThemeOverlay themes or, for whatever reason, colorPrimary will be ignored.

For completeness, here is the layout file I use for my toolbar, Toolbar.xml:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schmeas.android.com/apk/res-auto"
    style="@style/MyToolbarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Hopefully this helps someone!

score 1 · Answer 3 · answered Dec 17 '20 at 07:10

Theme.MaterialComponents

<style name="Theme.EmojiBible" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="actionBarTheme">@style/ThemeOverlay.Actionbar</item>
</style>

<style name="ThemeOverlay.Actionbar" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" >
    <item name="android:textColorPrimary">#f00</item>
</style>

score -1 · Answer 4 · answered Jan 16 '16 at 14:22

   <style name="AppTheme" parent="Theme.AppCompat.Light">

        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
        <!-- Customize your theme here. -->
    </style>

Also See: Making Custom ActionBar

score -1 · Answer 5 · answered Sep 06 '16 at 06:03

The directions in the documentation to set up the app bar recommend setting the the theme in the Android Manifest file like this:

<application
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    />

However, in my experience this overrode the colorPrimary style set up for the custom AppTheme. What worked for me was to define a custom theme like this:

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

And then to use this theme in the AndroidManifest file.

<application
    android:theme="@style/AppTheme"
    />

After that setting the Toolbar background color in the activity based on colorPrimary worked fine.

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

(Setting the ThemeOverlay with a dark theme ensures that the text is light.)

Change Material Design AppCompat ActionBar Color

5 Answers5

Theme.MaterialComponents

Linked