web-dev-qa-db-fra.com

Comment définir la couleur du titre pour la nouvelle barre d'outils?

J'utilise la nouvelle barre d'outils v7 et je ne vois pas comment changer la couleur du titre. J'ai défini le style de la barre d'outils sur un style déclaré dans styles.xml et appliqué un titleTextStyle avec un textColor Est-ce que je manque quelque chose? Je code pour Lollipop mais je teste actuellement sur un périphérique 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"/>
androidthemestoolbar
92
Dennis

Option 1) Le moyen rapide et facile (barre d'outils uniquement)

Depuis appcompat-v7-r23, vous pouvez utiliser les attributs suivants directement sur votre Toolbar ou son style:

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

Si votre SDK minimum est de 23 et que vous utilisez Toolbar en natif, remplacez simplement le préfixe d'espace de nom par Android.

En Java, vous pouvez utiliser les méthodes suivantes:

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

Ces méthodes prennent une couleur int et non un identifiant de ressource de couleur!

Option 2) Ignorer les attributs de style et de thème de la barre d'outils

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

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

Aidez-moi! Mes icônes ont aussi changé de couleur!

@PeterKnut a signalé que cela affectait la couleur du bouton de débordement, du bouton du tiroir de navigation et du bouton de retour. Il change également la couleur du texte de SearchView.

En ce qui concerne les couleurs des icônes: La colorControlNormal hérite de 

  • Android:textColorPrimary pour les thèmes sombres (blanc sur noir)
  • Android:textColorSecondary pour les thèmes légers (noir sur blanc)

Si vous appliquez cela au thème de la barre d'action, vous pouvez personnaliser la couleur de l'icône.

<item name="colorControlNormal">#de000000</item>

Il y avait un bogue dans appcompat-v7 jusqu'à la r23 qui vous obligeait également à remplacer l'homologue natif comme ceci:

<item name="Android:colorControlNormal" tools:ignore="NewApi">?colorControlNormal</item>

Aidez-moi! Mon SearchView est un gâchis!

Remarque: cette section est peut-être obsolète.

Puisque vous utilisez le widget de recherche qui, pour une raison quelconque, utilise une flèche de retour différente (pas visuellement, techniquement) de celle incluse dans appcompat-v7, vous devez le définir manuellement dans le thème de l'application. Les tiroirs de la bibliothèque de support sont teintés correctement. Sinon, ce serait toujours blanc.

<item name="homeAsUpIndicator">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>

En ce qui concerne le texte de recherche, il n’ya pas de moyen facile. Après avoir fouillé dans sa source, j'ai trouvé un moyen de passer à la vue texte. Je n'ai pas testé cela, merci de me le faire savoir dans les commentaires si cela n'a pas fonctionné. 

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

Bonus: remplacer les attributs de style et de thème ActionBar

Le style approprié pour une barre d’action par défaut d’action appcompat-v7 ressemblerait à ceci:

<!-- 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>
200
Eugen Pechanec

Voici ma solution si vous devez modifier uniquement la couleur du titre et non la couleur du texte dans le widget de recherche.

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>

De la même manière, vous pouvez également définir subtitleTextAppearance.

35
Peter Knut

Si vous prenez en charge l'API 23 et les versions ultérieures, vous pouvez maintenant utiliser l'attribut titleTextColor pour définir la couleur de titre de la barre d'outils.

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);
11
fractalwrench

Régler app:titleTextColor sur mon Android.support.v7.widget.Toolbar fonctionne pour moi sur Android 4.4 et 6.0 également avec 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" />
9
hunyadym

Cela m'ennuyait un moment et je n'aimais aucune des réponses données, alors j'ai jeté un coup d'œil à la source pour voir comment ça marche.

FractalWrench est sur le bon chemin, mais il peut être utilisé sous l’API 23 et ne doit pas nécessairement être défini dans la barre d’outils, c’est soi-même.

Comme d’autres l’ont dit, vous pouvez définir un style dans la barre d’outils avec 

app:theme="@style/ActionBar"

et dans ce style, vous pouvez définir la couleur du texte du titre avec 

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

pour pré API 23 ou pour 23+

<item name="Android:titleTextColor">your colour</item>

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

Heres tous les attributs qui peuvent être définis pour une barre d'outils

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

Le moyen le plus simple de changer la couleur du titre Toolbar avec en CollapsingToolbarLayout.

Ajoutez les styles ci-dessous à 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
Poras Bhardwaj

Cela a fonctionné pour moi 

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

Créez une barre d'outils dans votre fichier xml ... toolbar.xml:

<Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"

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

Ajoutez ensuite les éléments suivants dans votre fichier toolbar.xml:

app:titleTextColor="@color/colorText"
app:title="@string/app_name">

Remeber @ color/colorText est simplement votre fichier color.xml avec l'attribut color nommé colorText et votre couleur. C'est le meilleur moyen d'appeler vos chaînes plutôt que de coder en dur votre couleur dans votre toolbar.xml. Vous avez également d'autres options pour modifier votre texte, telles que: textAppearance ... etc ... tapez simplement app: text ... et intelisense vous donnera des options dans Android studio.

votre dernière barre d'outils devrait ressembler à ceci:

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

NB: Cette barre d’outils devrait être à l’intérieur de votre activity_main.xml.Easy Peasie

Une autre option consiste à tout faire dans votre classe:

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitleTextColor(Color.WHITE);

Bonne chance

2
RileyManda

Pour changer la couleur 

<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
Mourad MAMASSI
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);
}

}

Ou simple utilisation de 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
IQ.feature

Très simple, cela a fonctionné pour moi (titre et icône en blanc):

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

Si vous pouvez utiliser 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>
0
Surender Kumar

Faites-le avec toolbar.setTitleTextAppearance(context, R.style.TitleTextStyle);

// c'est le style où vous pouvez personnaliser votre jeu de couleurs

 <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
shaby
<?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
Vipin Sharma