如何为新工具栏设置标题颜色?

143

我正在使用新的v7工具栏,但就是搞不明白如何更改标题的颜色。我已将工具栏的@style设置为styles.xml中声明的样式,并应用了一个titleTextStyle和textColor。我错过了什么吗?我在编码Lollipop,但目前在Kitkat设备上进行测试。

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light">
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>

    <style name="ActionBar" parent="Theme.AppCompat">
        <item name="android:background">@color/actionbar_background</item>
        <item name="android:titleTextStyle">@style/ActionBar.TitleTextStyle</item>
    </style>

    <style name="ActionBar.TitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_title_text</item>
    </style>

</resources>

actionbar.xml:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar_actionbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    style="@style/ActionBar"/>
16个回答

278

选项1)快速简单的方式(仅工具栏)

自从appcompat-v7-r23版本以来,您可以直接在Toolbar或其样式上使用以下属性:

app:titleTextColor="@color/primary_text"
app:subtitleTextColor="@color/secondary_text"

如果您的最低SDK版本是23,并且您使用本地Toolbar,只需将命名空间前缀更改为android

在Java中,您可以使用以下方法:

toolbar.setTitleTextColor(Color.WHITE);
toolbar.setSubtitleTextColor(Color.WHITE);

这些方法需要一个颜色整数而不是颜色资源ID!

选项2)覆盖工具栏样式和主题属性

layout/xxx.xml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.MyApp.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    style="@style/Widget.MyApp.Toolbar.Solid"/>

值/样式.xml

<style name="Widget.MyApp.Toolbar.Solid" parent="Widget.AppCompat.ActionBar">
    <item name="android:background">@color/actionbar_color</item>
    <item name="android:elevation" tools:ignore="NewApi">4dp</item>
    <item name="titleTextAppearance">...</item>
</style>

<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
    <!-- Parent theme sets colorControlNormal to textColorPrimary. -->
    <item name="android:textColorPrimary">@color/actionbar_title_text</item>
</style>

救命啊!我的图标颜色也变了!

@PeterKnut反映这会影响溢出按钮、导航抽屉按钮和返回按钮的颜色,还会改变SearchView的文本颜色。

关于图标颜色:在暗色主题(白字黑底)中,colorControlNormal继承自android:textColorPrimary;在亮色主题(黑字白底)中则继承自android:textColorSecondary

  • 如果你将其应用到操作栏主题上,你可以自定义图标颜色。
<item name="colorControlNormal">#de000000</item>

在appcompat-v7版本号低于r23的情况下存在一个bug,需要你这样同时覆盖本地对应项:

There was a bug in appcompat-v7 up to r23 which required you to also override the native counterpart like so:

返回:

在appcompat-v7版本号低于r23的情况下存在一个bug,需要你这样同时覆盖本地对应项:

<item name="android:colorControlNormal" tools:ignore="NewApi">?colorControlNormal</item>

救命啊!我的SearchView出了问题!

注意:本节内容可能已经过时。

由于您使用的搜索小部件某种原因使用的是与appcompat-v7中包含的箭头不同的返回箭头(在视觉上不同,但技术上不同),您需要在应用程序主题中手动设置它。支持库的可绘制对象会正确地获取色调。否则它将始终为白色。

<item name="homeAsUpIndicator">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>

关于搜索视图文本...没有简单的方式。在查看其源代码后,我找到了一种获取文本视图的方法。我尚未测试过这个方法,如果不起作用,请在评论中告诉我。

SearchView sv = ...; // get your search view instance in onCreateOptionsMenu
// prefix identifier with "android:" if you're using native SearchView
TextView tv = sv.findViewById(getResources().getIdentifier("id/search_src_text", null, null));
tv.setTextColor(Color.GREEN); // and of course specify your own color

奖励: 覆盖ActionBar的样式和主题属性

对于默认行动条appcompat-v7,适当的样式应该像这样:

<!-- ActionBar vs Toolbar. -->
<style name="Widget.MyApp.ActionBar.Solid" parent="Widget.AppCompat.ActionBar.Solid">
    <item name="background">@color/actionbar_color</item> <!-- No prefix. -->
    <item name="elevation">4dp</item> <!-- No prefix. -->
    <item name="titleTextStyle">...</item> <!-- Style vs appearance. -->
</style>

<style name="Theme.MyApp" parent="Theme.AppCompat">
    <item name="actionBarStyle">@style/Widget.MyApp.ActionBar.Solid</item>
    <item name="actionBarTheme">@style/ThemeOverlay.MyApp.ActionBar</item>
    <item name="actionBarPopupTheme">@style/ThemeOverlay.AppCompat.Light</item>
</style>

2
这个解决方案有各种副作用。textColorPrimary也适用于导航抽屉按钮和搜索小部件中的文本。此外,返回按钮的颜色设置为白色(不要问我为什么)。 - Peter Knut
@PeterKnut 当时我没有意识到提出的解决方案有多不完整。编辑后 - 这是我如何使用它并且它有效。但请检查搜索视图文本颜色片段。 - Eugen Pechanec
现在它几乎可以正常工作了。两个注意点:在搜索小部件中挖掘文本不是一个好主意,因为它的ID可能会在未来更改。Widget.MyApp.ActionBar中的背景属性也会影响按钮和工具提示的背景。必须直接在<android.support.v7.widget.Toolbar>中设置背景。 - Peter Knut
我同意,这不是一个好主意,至少要在那里添加一个空值检查(但是那个ID改变的几率有多大)。关于背景:你说得不对,如果你将它作为样式添加到工具栏元素中,背景只适用于工具栏小部件。如果你在ThemeOverlay中定义背景并将其用作主题,那么每个子元素的背景也会被着色。 - Eugen Pechanec
好的,你在样式和主题方面是正确的。我的错误。 - Peter Knut
只要不混淆使用 "android:" 和 "app:",这个就能正常工作。谢谢。 - ralphgabb

42

如果您只需要更改搜索工具栏中标题的颜色而不更改文本的颜色,则以下是我的解决方案。

layout/toolbar.xml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:background="@color/toolbar_bg"
    app:theme="@style/AppTheme.Toolbar"
    app:titleTextAppearance="@style/AppTheme.Toolbar.Title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"/>

values/themes.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
    </style>

    <style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">
        <!-- Customize color of navigation drawer icon and back arrow --> 
        <item name="colorControlNormal">@color/toolbar_icon</item>
    </style>

    <style name="AppTheme.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <!-- Set proper title size -->
        <item name="android:textSize">@dimen/abc_text_size_title_material_toolbar</item>
        <!-- Set title color -->
        <item name="android:textColor">@color/toolbar_title</item>
    </style>
</resources>

同样地,您也可以设置subtitleTextAppearance。


我遇到了一个问题,标题的颜色会根据工具栏是在Fragment还是在Activity中存在而不同。使用这个技巧来覆盖颜色是我能找到的唯一解决方法(其他改变颜色的方法都不起作用)。我希望这能帮助更多的人。谢谢! - Pedro Loureiro
3
@Peter Knut,你需要说明这仅适用于API21及以上版本,这使得它有些无用。 - DoruChidean
@DoruChidean 在 Jelly Bean (API 16) 上进行了测试:它的表现非常出色! - crubio
无法在活动上设置主题。即,<activity             android:name=".SomeActivity"             android:theme="@style/AppTheme.Toolbar" - lostintranslation

12

如果您正在支持API 23及以上版本,则可以使用 titleTextColor属性 来设置工具栏标题的颜色。

layout/toolbar.xml

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:titleTextColor="@color/colorPrimary"
        />

MyActivity.java

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar)
toolbar.setTitleTextColor(Color.WHITE);

这些似乎也被appcompat库支持。 - Eugen Pechanec

10

在Android 4.4上以及使用com.android.support:appcompat-v7:23.1.0的情况下,将app:titleTextColor设置到我的android.support.v7.widget.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:titleTextColor="@android:color/white" />

4
请注意,命名空间是app而不是android。 - Tommie
在KitKat及以上版本中,仅仅添加这行代码 app:titleTextColor="@android:color/white" 就可以解决问题。谢谢 @hunyadym - GS Nayma

9

这个问题困扰了我一段时间,我不喜欢给出的任何答案,所以我查看了源代码来了解它的工作原理。

FractalWrench的方法是正确的,但它可以在API 23以下使用,并且不必在工具栏上设置自身。

正如其他人所说,您可以在工具栏上设置样式

app:theme="@style/ActionBar"

在这种风格下,您可以使用以下方式设置标题文本颜色:

<item name="titleTextColor">#00f</item>

针对API 23之前或API 23及以上版本

<item name="android:titleTextColor">your colour</item>

完整的XML

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


<style name="ActionBar" parent="@style/ThemeOverlay.AppCompat.ActionBar">
    <item name="android:titleTextStyle">@style/ActionBarTextStyle</item>
    <item name="titleTextColor">your colour</item>
    <item name="android:background">#ff9900</item>
</style>

这是所有可以设置工具栏的属性:
<declare-styleable name="Toolbar">
    <attr name="titleTextAppearance" format="reference" />
    <attr name="subtitleTextAppearance" format="reference" />
    <attr name="title" />
    <attr name="subtitle" />
    <attr name="gravity" />
    <attr name="titleMargins" format="dimension" />
    <attr name="titleMarginStart" format="dimension" />
    <attr name="titleMarginEnd" format="dimension" />
    <attr name="titleMarginTop" format="dimension" />
    <attr name="titleMarginBottom" format="dimension" />
    <attr name="contentInsetStart" />
    <attr name="contentInsetEnd" />
    <attr name="contentInsetLeft" />
    <attr name="contentInsetRight" />
    <attr name="maxButtonHeight" format="dimension" />
    <attr name="navigationButtonStyle" format="reference" />
    <attr name="buttonGravity">
        <!-- Push object to the top of its container, not changing its size. -->
        <flag name="top" value="0x30" />
        <!-- Push object to the bottom of its container, not changing its size. -->
        <flag name="bottom" value="0x50" />
    </attr>
    <!-- Icon drawable to use for the collapse button. -->
    <attr name="collapseIcon" format="reference" />
    <!-- Text to set as the content description for the collapse button. -->
    <attr name="collapseContentDescription" format="string" />
    <!-- Reference to a theme that should be used to inflate popups
         shown by widgets in the toolbar. -->
    <attr name="popupTheme" format="reference" />
    <!-- Icon drawable to use for the navigation button located at
         the start of the toolbar. -->
    <attr name="navigationIcon" format="reference" />
    <!-- Text to set as the content description for the navigation button
         located at the start of the toolbar. -->
    <attr name="navigationContentDescription" format="string" />
    <!-- Drawable to set as the logo that appears at the starting side of
         the Toolbar, just after the navigation button. -->
    <attr name="logo" />
    <!-- A content description string to describe the appearance of the
         associated logo image. -->
    <attr name="logoDescription" format="string" />
    <!-- A color to apply to the title string. -->
    <attr name="titleTextColor" format="color" />
    <!-- A color to apply to the subtitle string. -->
    <attr name="subtitleTextColor" format="color" />
</declare-styleable>

7

使用 Material Components 库,您可以使用 app:titleTextColor 属性。

布局(layout) 中,您可以使用类似以下的内容:

<com.google.android.material.appbar.MaterialToolbar
    app:titleTextColor="@color/...."
    .../>

你可以使用自定义的 样式(style):
<com.google.android.material.appbar.MaterialToolbar
     style="@style/MyToolbarStyle"
    .../>

使用 Widget.MaterialComponents.Toolbar.Primary 样式进行扩展:

  <style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar.Primary">
       <item name="titleTextColor">@color/....</item>
  </style>

或者(扩展Widget.MaterialComponents.Toolbar样式):
  <style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
       <item name="titleTextColor">@color/....</item>
  </style>

您还可以使用android:theme属性(使用Widget.MaterialComponents.Toolbar.Primary样式)来覆盖由样式定义的颜色:

在此输入图片描述

    <com.google.android.material.appbar.MaterialToolbar
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        android:theme="@style/MyThemeOverlay_Toolbar"
        />

使用:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- This attributes is also used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/...</item>
  </style>

在此输入图片描述

或者(使用Widget.MaterialComponents.Toolbar样式):

    <com.google.android.material.appbar.MaterialToolbar
        style="@style/Widget.MaterialComponents.Toolbar"
        android:theme="@style/MyThemeOverlay_Toolbar2"

使用:

  <style name="MyThemeOverlay_Toolbar3" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- This attributes is used by title -->
    <item name="android:textColorPrimary">@color/white</item>

    <!-- This attributes is used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/secondaryColor</item>
  </style>

4

CollapsingToolbarLayout 中改变标题颜色的最简单方式。

将以下样式添加到 CollapsingToolbarLayout 中即可。

<android.support.design.widget.CollapsingToolbarLayout
        app:collapsedTitleTextAppearance="@style/CollapsedAppBar"
        app:expandedTitleTextAppearance="@style/ExpandedAppBar">

styles.xml

<style name="ExpandedAppBar" parent="@android:style/TextAppearance">
        <item name="android:textSize">24sp</item>
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textAppearance">@style/TextAppearance.Lato.Bold</item>
    </style>

    <style name="CollapsedAppBar" parent="@android:style/TextAppearance">
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textAppearance">@style/TextAppearance.Lato.Bold</item>
    </style>

3

今天我为这个问题苦苦挣扎了几个小时,因为所有这些答案都有点过时了,现在有了MDC和新的主题能力,我就看不到如何在整个应用程序中覆盖app:titleTextColor样式。

答案是,在styles.xml中,如果你在覆盖从Widget.AppCompat.Toolbar继承的某些东西,那么titleTextColor是可用的。现在,我认为最好的选择应该是Widget.MaterialComponents.Toolbar

<style name="Widget.LL.Toolbar" parent="@style/Widget.MaterialComponents.Toolbar">
     <item name="titleTextAppearance">@style/TextAppearance.LL.Toolbar</item>
     <item name="titleTextColor">@color/white</item>
     <item name="android:background">?attr/colorSecondary</item>
</style>

<style name="TextAppearance.LL.Toolbar" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
     <item name="android:textStyle">bold</item>
</style>

在您的应用程序主题中,指定toolbarStyle:

<item name="toolbarStyle">@style/Widget.LL.Toolbar</item>

现在你可以不更改指定工具栏的xml,很长一段时间我认为在工具栏标题文本外观中更改android:textColor应该有效,但出于某种原因它并不起作用。

2
这对我很有用。
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:navigationIcon="@drawable/ic_back"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:subtitleTextColor="@color/white"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:title="This week stats"
    app:titleTextColor="@color/white">


    <ImageView
        android:id="@+id/submitEditNote"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        android:src="@android:drawable/ic_menu_manage" />
</android.support.v7.widget.Toolbar>

2
在您的xml中创建一个工具栏...toolbar.xml:
<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"

    </android.support.v7.widget.Toolbar>

然后在您的toolbar.xml中添加以下内容:

app:titleTextColor="@color/colorText"
app:title="@string/app_name">

记住@color/colorText只是您的color.xml文件,其中颜色属性命名为colorText和您的颜色。这是调用字符串的最佳方式,而不是在toolbar.xml中硬编码您的颜色。您还可以使用其他选项修改文本,例如:textAppearance...等等...只需键入app:text...,intelisense将在Android Studio中为您提供选项。
您的最终工具栏应如下所示:
 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_weight="1"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/Theme.AppCompat"
       app:subtitleTextAppearance="@drawable/icon"
        app:title="@string/app_name">
    </android.support.v7.widget.Toolbar>

注意:此工具栏应该在activity_main.xml文件中。非常简单。

另一个选择是在您的类中完成所有操作:

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitleTextColor(Color.WHITE);

祝你好运


嘿,谢谢,这个有效。但是你知道如何仅在样式中使用该属性吗?而不是让XML变得更乱。谢谢 :) - Greggz
显然,你的@color直接来自于你的字符串资源。这样做可以让你的XML文件比硬编码颜色更加整洁。 - RileyManda

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接