Change Material Design AppCompat ActionBar Color

问题:

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.

回答1:

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.

回答2:

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!

回答3:

   <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

回答4:

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