Cómo configurar el texto de la barra de herramientas y el color de la flecha hacia atrás


116

El fondo de la barra de herramientas es de color oscuro, quiero que el texto y la flecha hacia atrás sean blancos. Intenté seguir, pero no funciona.

<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
Intente agregar app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"a su <android.support.v7.widget.Toolbar>; La flecha hacia atrás y el texto serán blancos, como dijo @yubarajpoudel.
1111161171159459134

Respuestas:


153

Lo más probable es que se esté extendiendo del padre equivocado. Si no es así, puede intentar agregarlo directamente styleal toolbardiseño, si desea anular la configuración del tema.

En el diseño de su barra de herramientas:

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

En tus estilos:

 <!-- 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
dando error al agregar este estilo al styles.xmlarchivo
Gopal Singh Sirvi

1
no necesita la parte drawerArrowStyle para responder la pregunta
luckyhandler

124

Agregue lo siguiente como 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>

Luego, en el diseño donde lo necesitabas

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

Disfrutar


10
¡Sí, funciona! Particularmente app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar".
1111161171159459134

1
Debería ser<include layout="@layout/toolbar"/>
Tim

63

Inside Activity, puedes usar

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

Si le encanta elegir xml tanto para el color del título como para la flecha hacia atrás en blanco, simplemente agregue este estilo en 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>

Y la barra de herramientas se ve así:

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

1
¡ESTO FUNCIONA! Tantas respuestas aleatorias, creo que lo que hay que tener en cuenta es que esto funciona para: android.support.v7.widget.Toolbar anidado dentro: android.support.design.widget.AppBarLayout Muchas gracias
Sagar Patel

1
la solución java no cambia el color de la flecha
java-love

19

Esta solución podría ser más sencilla. Pero requiere una versión de API superior (23). simplemente agregue este código a su barra de herramientas en 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

1
No es necesario configurar android: titleTextColor = "# ffffffff", solo android: theme = "@ style / ThemeOverlay.AppCompat.Dark.ActionBar" y app: popupTheme = "@ style / ThemeOverlay.AppCompat.Light"
Almeida

16

Si usa AndroidX(a partir de julio de 2019), puede agregar estos:

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

¡NOTA! Esto se probó para que funcione si Toolbarse coloca directamente dentro AppBarLayoutpero no dentroCollapsingToolbarLayout


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>

Esta es la respuesta si tiene un appbarlayout. ¡Gracias!
Nuhman

8

este método me ayudó.

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

use la aplicación: theme = "@ style / ToolBarStyle"

Recursos de referencia: http: //blog.csdn.net/wyyl1/article/details/45972371


1
Por favor, explique sus respuestas, solo publicar el código no es muy claro para responder una pregunta.
SuperBiasedMan

3

Pruebe esto en su archivo 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" />

Y agregue este es su archivo colors.xml

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

1
¿Puedes compartir con nosotros lo que había en la aplicación? Theme = "@ style / ToolbarColoredBackArrow"
Simon

3

Agregue esta línea a Toolbar. 100% funcionando

android:theme="@style/Theme.AppCompat.Light.DarkActionBar"

1

Pruebe muchos métodos, en la versión baja de la API, un método factible es <item name="actionMenuTextColor">@color/your_color</item>y no use el espacio de nombres de Android

PD:

  <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

Utilicé marcadores de posición, así que sígalos, ya que es posible que desee conservar la herencia del estilo original.

antes de

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

Después:

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>

Por lo tanto

<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

Si seguimos la plantilla de actividad creada por Android Studios, es el AppBarLayout el que debe tener un tema de Android de AppBarOverlay, que debes definir en tu styles.xml. Eso debería darle su texto de color de barra de herramientas / barra de acción de color blanco.

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

En styles.xml, asegúrese de que exista lo siguiente:

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

1

Este enfoque funcionó para mí usando la biblioteca de Componentes de materiales:

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

Adaptado de esta respuesta: https://stackoverflow.com/a/48205577/238753


0

Para cambiar el dibujable del icono de retroceso de la barra de herramientas, puede usar esto:
Agregue el <item name="toolbarStyle">@style/ToolbarStyle</item>en su tema.
Y aquí está el ToolbarStylemismo:

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

0

Si usa la última iteración de Android Studio 3.0 y genera sus clases de actividad, en sus archivos de estilos cambie esto:

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

A esto:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar" />
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.