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


119

我使用的是新的v7工具栏,我一生都无法确定如何更改标题的颜色。我已经将工具栏的@style设置为在styles.xml中声明的样式,并应用了带有textColor的titleTextStyle。我想念什么吗?我正在为棒棒糖编码,但目前正在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"/>

Answers:


241

选项1)快速简便的方法(仅工具栏)

从appcompat-v7-r23开始,您可以直接在您Toolbar的样式上使用以下属性:

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

如果您的最低SDK为23,并且使用native,则Toolbar只需将名称空间前缀更改为android

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

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

这些方法采用的是颜色int而不是颜色资源ID!

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

布局/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"/>

values / styles.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中存在一个错误,该错误要求您还覆盖本地对应方,如下所示:

<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中的Background属性也会影响按钮和工具提示中的背景。必须直接在<android.support.v7.widget.Toolbar>中设置背景。
彼得·纳特

我同意,这不是一个好主意,我至少要在其中添加一个null检查(但是该id更改的几率是多少)。关于背景:不正确,如果将其作为样式添加到工具栏元素,则背景仅适用于工具栏小部件。如果您要在中定义背景ThemeOverlay并将其用作主题,那么每个子元素的背景也会被着色。
Eugen Pechanec,2015年

好的,您对样式与主题是正确的。我的错。
彼得·纳特

40

如果您只需要更改标题的颜色,而无需更改搜索小部件中的文本的颜色,这是我的解决方案。

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。


我遇到一个问题,标题的颜色会有所不同,具体取决于工具栏是否存在于“片段”或“活动”中。我只能找到使用此技巧来覆盖颜色的方法(其他更改颜色的方法无效)。我希望这会帮助更多的人。谢谢!
Pedro Loureiro

3
@Peter Knut您需要指定这仅适用于API21及更高版本,这使它无用
DoruChidean 2015年

@DoruChidean已通过Jelly Bean(API 16)进行了测试:它的工作原理就像一种魅力!
crubio

无法设置活动主题。IE,<活动android:name =“。SomeActivity” android:theme =“ @ style / AppTheme.Toolbar”
lostintranslation

11

如果您支持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 '16

10

设置app:titleTextColor在我android.support.v7.widget.Toolbar与作品对我来说在Android 4.4和6.0太com.android.support:appcompat-v7:23.1.0

<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 2015年

只需添加此行app:titleTextColor =“ @ android:color / white”在kitkat及以上版本中对我也有效。感谢@hunyadym
Ghanshyam Nayma '17

9

这让我很烦,而且我不喜欢给出的任何答案,因此我查看了源以了解其工作原理。

FractalWrench在正确的路径上,但可以在API 23以下使用,而不必在本身的工具栏上进行设置。

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

app:theme="@style/ActionBar"

并可以使用该样式设置标题文字颜色

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

适用于pre API 23或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>

4

Toolbar使用in 更改标题颜色的最简单方法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

如果可以使用 appcompat-v7 app:titleTextColor =“#fff”>

<android.support.v7.widget.Toolbar  
        android:id="@+id/toolbar"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:background="@color/colorPrimary"   
        android:visibility="gone"   
        app:titleTextColor="#fff">   
    </android.support.v7.widget.Toolbar>   

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 ... etc ...只需键入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

1

改变颜色

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="?attr/colorPrimary"

/>

Toolbar myToolbar = (Toolbar) findViewById(R.id.toolbar);
        myToolbar.setTitleTextColor(ContextCompat.getColor(getApplicationContext(), R.color.Auth_Background));
        setSupportActionBar(myToolbar);

1

我今天为此苦了几个小时,因为现在所有这些答案都有些过时了,而MDC和新的主题功能使我无法看到如何覆盖app:titleTextColor样式。

答案是,titleTextColor如果您要覆盖继承自的内容,则styles.xml中可用Widget.AppCompat.Toolbar。今天,我认为最好的选择应该是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工具栏标题中的文本外观应该可以,但是由于某种原因,它不起作用。


0
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          xmlns:app="http://schemas.android.com/apk/res-auto">

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


0
public class MyToolbar extends android.support.v7.widget.Toolbar {

public MyToolbar(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    AppCompatTextView textView = (AppCompatTextView) getChildAt(0);
    if (textView!=null) textView.setTextAppearance(getContext(), R.style.TitleStyle);
}

}

或从MainActivity中简单使用:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbarMain);
setSupportActionBar(toolbar);
((AppCompatTextView) toolbar.getChildAt(0)).setTextAppearance(this, R.style.TitleStyle);

style.xml

<style name="TileStyle" parent="TextAppearance.AppCompat">
    <item name="android:textColor">@color/White</item>
    <item name="android:shadowColor">@color/Black</item>
    <item name="android:shadowDx">-1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
</style>

尽管此代码可以回答这个问题,倒不如包括一些背景,解释如何它的工作原理,并使用它。从长远来看,纯代码答案没有用。
阿迪蒂·拉瓦特

0

用它做 toolbar.setTitleTextAppearance(context, R.style.TitleTextStyle);

//这是您可以自定义配色方案的样式

 <style name="TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:fontFamily">@string/you_font_family</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textAppearance">@style/you_text_style</item>
    <item name="android:textColor">#000000</item>
    <item name="android:textSize">20sp</item>
</style>

0

很简单,这对我有用(标题和图标为白色):

    <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:background="@color/PrimaryColor"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:elevation="4dp" />

0

通过材料零部件库,您可以使用该app:titleTextColor属性。

布局中,您可以使用类似:

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

您还可以使用自定义样式

<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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.