Comment définir le texte de la barre d'outils et la couleur de la flèche arrière

116

L'arrière-plan de la barre d'outils est de couleur sombre, je veux que le texte et la flèche de retour soient blancs. J'ai essayé de suivre, mais cela ne fonctionne pas.

<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>
Taranfx
la source
10
Essayez d'ajouter app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"à votre <android.support.v7.widget.Toolbar>; la flèche de retour et le texte seront blancs, comme l'a dit @yubarajpoudel.
1111161171159459134

Réponses:

153

Il y a de fortes chances que vous sortiez du mauvais parent. Sinon, vous pouvez essayer d'ajouter directement le styleà la toolbarmise en page, si vous souhaitez remplacer les paramètres du thème.

Dans la disposition de votre barre d'outils:

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

Dans vos styles:

 <!-- 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>
vhuynh
la source
5
donnant une erreur lors de l'ajout de ce style au styles.xmlfichier
Gopal Singh Sirvi
1
vous n'avez pas besoin de la partie drawArrowStyle pour répondre à la question
luckyhandler
124

Ajoutez ce qui suit en tant que 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>

Puis dans la mise en page où vous aviez besoin

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

Prendre plaisir

yubaraj poudel
la source
10
Oui, ça marche! Particulièrement app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar".
1111161171159459134
1
Devrait être<include layout="@layout/toolbar"/>
Tim
63

À l'intérieur de l'activité, vous pouvez utiliser

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

Si vous aimez choisir xml pour la couleur du titre et la flèche arrière blanche, ajoutez simplement ce style dans 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>

Et la barre d'outils ressemble à:

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        app:theme="@style/ToolBarStyle"
        android:layout_height="?attr/actionBarSize"
  />
Shihab Uddin
la source
1
CELA MARCHE! Tant de réponses aléatoires - je pense que la chose à noter est que cela fonctionne pour: android.support.v7.widget.Toolbar imbriqué dans: android.support.design.widget.AppBarLayout Merci beaucoup
Sagar Patel
1
la solution java ne change pas la couleur de la flèche
java-love
19

Cette solution pourrait être plus simple. Mais cela nécessite une version d'API plus élevée (23). ajoutez simplement ce code à votre barre d'outils 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" />
Tom Esendam
la source
@VygintasB true
Tom Esendam
1
Il n'est pas nécessaire de définir android: titleTextColor = "# ffffffff", juste android: theme = "@ style / ThemeOverlay.AppCompat.Dark.ActionBar" et app: popupTheme = "@ style / ThemeOverlay.AppCompat.Light"
Almeida
16

Si vous utilisez AndroidX(à partir de juillet 2019), vous pouvez ajouter ces éléments:

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

REMARQUE! Cela a été testé pour fonctionner si votre Toolbarest placé directement à l'intérieur AppBarLayoutmais pas à l'intérieurCollapsingToolbarLayout

Denis Dmitrienko
la source
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>
shantanu
la source
C'est la réponse si vous avez un fichier appbarlayout. Merci!
Nuhman
8

cette méthode m'a aidé.

<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>
Руслан Кушалиев
la source
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>

utilisez l'application: theme = "@ style / ToolBarStyle"

Ressources de référence : http: //blog.csdn.net/wyyl1/article/details/45972371

Huang Jinlong
la source
1
Veuillez expliquer vos réponses, le simple fait d'afficher le code n'est pas très clair pour répondre à une question.
SuperBiasMan
3

Essayez ceci sur votre fichier 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" />

Et ajoutez ceci est votre fichier colors.xml

    <color name="colorAccent">YOUR_COLOR</color>
Faxriddin Abdullayev
la source
1
S'il vous plaît pouvez-vous partager avec nous ce qui était dans l'application: theme = "@ style / ToolbarColoredBackArrow"
Simon
3

Ajoutez cette ligne à Toolbar. 100% de travail

android:theme="@style/Theme.AppCompat.Light.DarkActionBar"
Gurwinder Singh
la source
1

Essayez beaucoup de méthodes, dans la version basse de l'API, une méthode réalisable est <item name="actionMenuTextColor">@color/your_color</item>et n'utilisez pas l'espace de noms 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>
BoBoMEe
la source
1

J'ai utilisé des espaces réservés, alors suivez simplement, car vous voudrez peut-être conserver l'héritage du style d'origine.

Avant

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

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

Par conséquent

<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"/>
Juan Mendez
la source
1

Si nous suivons le modèle d'activité créé par Android Studios, c'est l'AppBarLayout qui doit avoir un thème Android d'AppBarOverlay, que vous devez définir dans votre styles.xml. Cela devrait vous donner votre texte de couleur toobar / actionbar de couleur blanche.

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

Dans styles.xml, assurez-vous que les éléments suivants existent:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
Yaojin
la source
1

Cette approche a fonctionné pour moi en utilisant la bibliothèque de composants matériels:

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

Adapté de cette réponse: https://stackoverflow.com/a/48205577/238753

Sam
la source
0

Pour modifier l'icône de retour de la barre d'outils, vous pouvez utiliser ceci:
Ajoutez le <item name="toolbarStyle">@style/ToolbarStyle</item>dans votre thème.
Et voici le ToolbarStylelui - même:

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

Si vous utilisez la dernière itération d'Android Studio 3.0 et générez vos classes d'activité, dans vos fichiers de styles, changez ceci:

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

Pour ça:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar" />
muruthi
la source