如何设置工具栏文本和后退箭头颜色


115

工具栏背景为深色,我希望文本和后退箭头为白色。我尝试了以下操作,但是没有用。

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/blue</item>
        <item name="colorPrimaryDark">@color/blue_darker</item>
        <item name="colorAccent">@color/purple</item>
        <!-- item name="android:textColorPrimary">@color/white</item--> // I don't want to set this, changes everywhere. 
        <item name="android:textColorSecondary">@color/white</item>
        <item name="android:toolbarStyle">@style/AppTheme.ToolbarStyle</item>
        <item name="toolbarStyle">@style/AppTheme.ToolbarStyle</item>

        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowStyle</item>

    </style>

    <style name="AppTheme.ToolbarStyle" parent="Base.Widget.AppCompat.Toolbar">
        <!--<item name="actionOverflowButtonStyle">@style/AppTheme.OverflowButtonStyle</item>-->
        <item name="android:textColor">@color/white</item> // doesn't work
        <item name="titleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse</item>
        <item name="android:titleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse</item>
        <item name="subtitleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle</item>
    </style>

10
尝试添加app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"到您的<android.support.v7.widget.Toolbar>; 后退箭头和文本将为白色,如@yubarajpoudel所说。
1111161171159459134 '02

Answers:


153

您很有可能是从错误的父母那里继承过来的。如果不是这样,如果您要覆盖主题的设置,则可以尝试直接将其添加styletoolbar布局中。

在工具栏布局中:

 <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="?attr/actionBarSize"
      android:minHeight="?attr/actionBarSize"
      app:theme="@style/ToolBarStyle"
      app:popupTheme="@style/ToolBarPopupStyle"
      android:background="@color/actionbar_color" />

以您的风格:

 <!-- ToolBar -->
  <style name="ToolBarStyle" parent="Theme.AppCompat">
      <item name="android:textColorPrimary">@android:color/white</item>
      <item name="android:textColorSecondary">@android:color/white</item>
      <item name="actionMenuTextColor">@android:color/white</item>      
      <item name="actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item>
      <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
 </style>

5
在将此样式添加到styles.xml文件时给出错误
Gopal Singh Sirvi 2015年

1
您不需要抽屉的ArrowStyle部分来回答问题
luckyhandler '16

123

将以下内容添加为toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<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_height="wrap_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:background="?attr/colorPrimary">

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

然后在需要的布局中

<include layout="@layout/toolbar"/>

请享用


10
是的,行得通!特别是app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
1111161171159459134 '16

1
应该是<include layout="@layout/toolbar"/>
Tim

63

内部活动中,您可以使用

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));

如果您喜欢为标题颜色和后退箭头白色选择xml,只需在style.xml中添加此样式。

 <style name="ToolBarStyle" parent="Theme.AppCompat">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="actionMenuTextColor">@android:color/white</item>
</style>

工具栏如下所示:

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

1
这项工作!如此众多的随机答案-我认为要注意的是,它适用于:android.support.v7.widget.Toolbar嵌套在其中:android.support.design.widget.AppBarLayout非常感谢
Sagar Patel

1
Java解决方案不会更改箭头颜色
Java-

19

此解决方案可能更容易。但是它确实需要更高的API版本(23)。只需将此代码添加到XML的工具栏中:

<Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:titleTextColor="#ffffffff" />

@VygintasB true
Tom Esendam '18

1
无需设置android:titleTextColor =“#ffffffff”,仅设置android:theme =“ @ style / ThemeOverlay.AppCompat.Dark.ActionBar”和app:popupTheme =“ @ style / ThemeOverlay.AppCompat.Light”
Almeida

16

如果您使用AndroidX(截至2019年7月),则可以添加以下内容:

<androidx.appcompat.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_collapseMode="pin"
  app:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
  app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"/>

注意!如果您Toolbar直接放置在内部AppBarLayout而不是内部,则经过测试可以正常工作CollapsingToolbarLayout


9
<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimaryDark"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>

如果您有,这就是答案appbarlayout。谢谢!
纳曼

8

这种方法帮助了我。

<style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDark</item>
        <item name="colorAccent">@color/highlightRed</item>
        <item name="actionBarTheme">@style/ToolbarStyle</item>
</style>

<style name="ToolbarStyle" parent="Widget.AppCompat.ActionBar">
        <item name="android:textColorPrimary">@color/white</item>
</style>

6
<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="?attr/actionBarSize"
android:background="@color/actionBar"
app:titleTextAppearance="@style/ToolbarTitleText"
app:theme="@style/ToolBarStyle">

<TextView
    android:id="@+id/title"
    style="@style/ToolbarTitleText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="hh"/>

<!-- ToolBar -->
<style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="actionMenuTextColor">#ff63BBF7</item>
</style>

使用app:theme =“ @ style / ToolBarStyle”

参考资源:http://blog.csdn.net/wyyl1/article/details/45972371


1
请解释您的答案,只是张贴代码对于回答问题不是很清楚。
SuperBiasedMan 2015年

3

在您的XML文件上尝试一下

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:titleTextColor="@color/colorAccent"
        app:theme="@style/ToolbarColoredBackArrow"
        app:subtitleTextColor="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

并添加这是您的colors.xml文件

    <color name="colorAccent">YOUR_COLOR</color>

1
请您与我们分享应用程序中的内容:theme =“ @ style / ToolbarColoredBackArrow”
Simon,


1

尝试许多方法,在API的低版本中,可行的方法是<item name="actionMenuTextColor">@color/your_color</item>并且不要使用Android名称空间

ps:

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

    <!-- change the textColor -->
    <item name="actionMenuTextColor">@color/actionMenuTextColor</item>
</style>

1

我使用了占位符,因此请按照以下步骤操作,因为您可能仍想保留对原始样式的继承。

之前

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

后:

styles.xml

<style name="{{yourToolbarStyle}}" parent="{{originalBaseStyle}}">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="actionMenuTextColor">@android:color/white</item>
    <item name="actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

因此

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

1

如果我们遵循Android Studios创建的活动模板,则AppBarLayout需要具有AppBarOverlay的android主题,您应该在styles.xml中定义该主题。那应该给你白色的toobar / actionbar颜色文本。

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">  ...

在styles.xml中,确保存在以下内容:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

1

这种方法使用Material Components库为我工作:

styles.xml

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Your styles here -->

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

<style name="AppTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="titleTextColor">@android:color/white</item>
</style>

从此答案改编而成:https : //stackoverflow.com/a/48205577/238753


0

要更改工具栏的后方图标可绘制,您可以使用以下方法:
将添加<item name="toolbarStyle">@style/ToolbarStyle</item>到主题中。
这就是它ToolbarStyle本身:

<style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="navigationIcon">@drawable/ic_up_indicator</item>
</style>

0

如果使用最新版本的Android Studio 3.0并生成您的Activity类,请在样式文件中更改以下内容:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

对此:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar" />
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.