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>

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>

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


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

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

@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


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>

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>

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


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>

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"

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>

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

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

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


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>

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" />
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.