Android 更改 Material Design AppCompat ActionBar 颜色

Change Material Design AppCompat ActionBar Color

提问by user3184899

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

我曾经使用 更改 AppCompat 状态栏颜色actionBarStyle，并创建一个带有我想要的背景颜色的样式。

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

现在，有了 Material Design AppCompat，这种方法就不再适用了。

Can you help me? Thanks.

你能帮助我吗？谢谢。

回答by reVerse

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

colorPrimary您可以在主题中定义一个名为的新属性。这将为您提供 ActionBar 或 Toolbar 纯色。

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

请注意：它必须是 only colorPrimary， not android:colorPrimary，在每个值文件夹中，除了values-v21一个。

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

您可以在developer.android.com上阅读有关自定义调色板的更多信息。

回答by Justin

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.

就我而言，@reVerse 有部分答案。我必须进行一些额外的更改才能使 colorPrimary 工作，因为我正在自定义工具栏的其他部分……特别是文本颜色。

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

这是我的工作 style.xml 文件，注释表明我做错了什么：

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

因此，在自定义工具栏背景颜色以外的颜色时，您需要确保使用 ThemeOverlay 主题之一，否则无论出于何种原因，colorPrimary 都将被忽略。

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

为了完整起见，这是我用于工具栏的布局文件 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!

希望这对某人有所帮助！

回答by Half Moon

   <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

另请参阅：制作自定义 ActionBar

回答by Suragch

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

本文档中的方向设置应用栏建议您在设定的主题在这样的Android清单文件：

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

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

但是，根据我的经验，这会覆盖colorPrimary为自定义 AppTheme 设置的样式。对我有用的是定义一个这样的自定义主题：

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

然后在 AndroidManifest 文件中使用这个主题。

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

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

之后，在基于colorPrimary工作正常的活动中设置工具栏背景颜色。

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

（使用深色主题设置 ThemeOverlay 可确保文本浅色。）