Changer la couleur de la barre d'outils dans Appcompat 21

93

Je teste les nouvelles fonctionnalités de Material Design d'Appcompat 21. Par conséquent, j'ai créé une barre d'outils comme celle-ci:

<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/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

et je l'ai inclus dans mon fichier de mise en page principal.

Ensuite, je l'ai défini comme supportActionBar comme ça:

Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);

Cela fonctionne, mais je n'arrive pas à comprendre comment personnaliser la barre d'outils. C'est gris et le texte dessus est noir. Comment changer la couleur du fond et du texte?

J'ai suivi ces instructions:

http://android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html

Qu'ai-je supervisé pour changer de couleur?

 <style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowActionBar" tools:ignore="NewApi">false</item>
    <item name="windowActionBar">false</item>
</style>

MODIFIER :

J'ai pu changer la couleur d'arrière-plan en ajoutant ces lignes de code au thème:

<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>

Mais ils n'affecteront pas la couleur du texte. Qu'est-ce que je rate? Au lieu du texte noir et du bouton de menu noir, je préfère un texte blanc et des boutons de menu blancs:

entrez la description de l'image ici

user2410644
la source
à quoi ressemble votre thème pour l'activité? avez-vous défini votre couleur pour la barre d'outils comme vous le devriez?
tyczj
@tyczj J'ajoute le thème à mon message
user2410644
ok bien il y a vous répondez que vous ne définissez pas vos couleurs
tyczj
@tyczj, Ouais, j'ai à nouveau édité mon message, j'ai ajouté primarycolor et primarydarkcolor, mais quel attribut change la couleur du texte?
user2410644

Réponses:

185

encore une fois, tout est dans le lien que vous avez fourni

pour changer le texte en blanc, tout ce que vous avez à faire est de changer le thème.

utiliser ce thème

<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/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
tyczj
la source
4
Ouais, j'ai juste remarqué la même chose, il était soudainement déroutant que la barre d'action sombre ait un texte clair et un texte sombre de la barre d'action claire ... Merci!
user2410644
4
J'ai fait comme ça, mais j'ai toujours la police de couleur noire, ai-je oublié quelque chose?
alijandro
6
Donc, il semble que le @ style / ThemeOverlay.AppCompat.Dark.ActionBar sur l'application: le thème change le texte de la barre d'outils en blanc et @ style / ThemeOverlay.AppCompat.Light le change en noir. La couleur d'arrière-plan est choisie dans l'attribut android: background. Alors que sur l'application: popupTheme: @ style / ThemeOverlay.AppCompat.Dark donne du texte blanc et un fond noir et @ style / ThemeOverlay.AppCompat.Light donne du texte noir et un fond blanc. gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
bitek
1
Merci! : D google a vraiment gâché le style de la barre d'outils sur Android. Le fait que cette question comporte 50 votes positifs et 22 départs en est la preuve.
FRR
1
Si le titre reste noir après avoir défini les styles. Assurez-vous de prolonger AppCompatActivityau lieu de Activity.
stefana le
60

MISE À JOUR 12/11/2019: Bibliothèque de composants de matériaux

Avec les composants de matériaux et les bibliothèques Androidx, vous pouvez utiliser:

  • l' android:backgroundattribut dans la mise en page:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
  • appliquer le style par défaut: style="@style/Widget.MaterialComponents.Toolbar.Primary"ou personnaliser le style qui en hérite:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
  • remplacer la couleur par défaut à l'aide de l' android:themeattribut:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/MyThemeOverlay_Toolbar"

avec:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="android:textColorPrimary">....</item>
    <item name="colorPrimary">@color/.....
    <item name="colorOnPrimary">@color/....</item>
  </style>

ANCIEN: bibliothèques de support:
vous pouvez utiliser un app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"thème comme suggéré dans d'autres réponses, mais vous pouvez également utiliser une solution comme celle-ci:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/HeaderBar"
    app:theme="@style/ActionBarThemeOverlay"
    app:popupTheme="@style/ActionBarPopupThemeOverlay"/>

Et vous pouvez avoir le contrôle total de vos éléments d'interface utilisateur avec ces styles:

<style name="ActionBarThemeOverlay" parent="">
    <item name="android:textColorPrimary">#fff</item>
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlHighlight">#3fff</item>
</style>

<style name="HeaderBar">
    <item name="android:background">?colorPrimary</item>
</style>

<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" >
    <item name="android:background">@android:color/white</item>
    <item name="android:textColor">#000</item>
</style>
Gabriele Mariotti
la source
Cela ne fonctionne pas pour moi. Le menu contextuel est toujours sur fond noir avec du texte blanc
Sunkas
1
Inutile. Il nécessite un niveau d'API
minimum
3
@VaibhavGupta Appcompat nécessite minSdk = 7 et non 21.
Gabriele Mariotti
10

Hé, si vous souhaitez appliquer le thème Material pour Android 5.0 uniquement, vous pouvez y ajouter ce thème

<style name="AppHomeTheme" parent="@android:style/Theme.Material.Light">

        <!-- customize the color palette -->
        <item name="android:colorPrimary">@color/blue_dark_bg</item>
        <item name="android:colorPrimaryDark">@color/blue_status_bar</item>
        <item name="android:colorAccent">@color/blue_color_accent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:actionMenuTextColor">@android:color/black</item>
    </style> 

La ligne ci-dessous est responsable de la couleur du texte de la barre d'action de la conception matérielle.

<item name="android:textColorPrimary">@android:color/white</item>
Herry
la source
6

Vous pouvez définir dynamiquement une couleur d'élément de barre d'outils personnalisée en créant une classe de barre d'outils personnalisée:

package view;

import android.app.Activity;
import android.content.Context;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.support.v7.internal.view.menu.ActionMenuItemView;
import android.support.v7.widget.ActionMenuView;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AutoCompleteTextView;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomToolbar extends Toolbar{

    public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
    }

    public CustomToolbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public CustomToolbar(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        ctxt = context;
    }

    int itemColor;
    Context ctxt;

    @Override 
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        Log.d("LL", "onLayout");
        super.onLayout(changed, l, t, r, b);
        colorizeToolbar(this, itemColor, (Activity) ctxt);
    } 

    public void setItemColor(int color){
        itemColor = color;
        colorizeToolbar(this, itemColor, (Activity) ctxt);
    }



    /**
     * Use this method to colorize toolbar icons to the desired target color
     * @param toolbarView toolbar view being colored
     * @param toolbarIconsColor the target color of toolbar icons
     * @param activity reference to activity needed to register observers
     */
    public static void colorizeToolbar(Toolbar toolbarView, int toolbarIconsColor, Activity activity) {
        final PorterDuffColorFilter colorFilter
                = new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.SRC_IN);

        for(int i = 0; i < toolbarView.getChildCount(); i++) {
            final View v = toolbarView.getChildAt(i);

            doColorizing(v, colorFilter, toolbarIconsColor);
        }

      //Step 3: Changing the color of title and subtitle.
        toolbarView.setTitleTextColor(toolbarIconsColor);
        toolbarView.setSubtitleTextColor(toolbarIconsColor);
    }

    public static void doColorizing(View v, final ColorFilter colorFilter, int toolbarIconsColor){
        if(v instanceof ImageButton) {
            ((ImageButton)v).getDrawable().setAlpha(255);
            ((ImageButton)v).getDrawable().setColorFilter(colorFilter);
        }

        if(v instanceof ImageView) {
            ((ImageView)v).getDrawable().setAlpha(255);
            ((ImageView)v).getDrawable().setColorFilter(colorFilter);
        }

        if(v instanceof AutoCompleteTextView) {
            ((AutoCompleteTextView)v).setTextColor(toolbarIconsColor);
        }

        if(v instanceof TextView) {
            ((TextView)v).setTextColor(toolbarIconsColor);
        }

        if(v instanceof EditText) {
            ((EditText)v).setTextColor(toolbarIconsColor);
        }

        if (v instanceof ViewGroup){
            for (int lli =0; lli< ((ViewGroup)v).getChildCount(); lli ++){
                doColorizing(((ViewGroup)v).getChildAt(lli), colorFilter, toolbarIconsColor);
            }
        }

        if(v instanceof ActionMenuView) {
            for(int j = 0; j < ((ActionMenuView)v).getChildCount(); j++) {

                //Step 2: Changing the color of any ActionMenuViews - icons that
                //are not back button, nor text, nor overflow menu icon.
                final View innerView = ((ActionMenuView)v).getChildAt(j);

                if(innerView instanceof ActionMenuItemView) {
                    int drawablesCount = ((ActionMenuItemView)innerView).getCompoundDrawables().length;
                    for(int k = 0; k < drawablesCount; k++) {
                        if(((ActionMenuItemView)innerView).getCompoundDrawables()[k] != null) {
                            final int finalK = k;

                            //Important to set the color filter in seperate thread, 
                            //by adding it to the message queue
                            //Won't work otherwise. 
                            //Works fine for my case but needs more testing

                            ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);

//                              innerView.post(new Runnable() {
//                                  @Override
//                                  public void run() {
//                                      ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
//                                  }
//                              });
                        }
                    }
                }
            }
        }
    }



}

puis reportez-vous-y dans votre fichier de mise en page. Vous pouvez maintenant définir une couleur personnalisée en utilisant

toolbar.setItemColor(Color.Red);

Sources:

J'ai trouvé les informations pour le faire ici: Comment changer dynamiquement la couleur des icônes de la barre d'outils Android

puis je l'ai édité, amélioré et posté ici: GitHub: AndroidDynamicToolbarItemColor

Michael Kern
la source
5

C'est ce qu'on appelle une DarkActionBar, ce qui signifie que vous devez utiliser le thème suivant pour obtenir le style souhaité:

<android.support.v7.widget.Toolbar  
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="@dimen/triple_height_toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
MrEngineer13
la source
2

Vous pouvez changer la couleur du texte dans la barre d'outils avec ceux-ci:

<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColor">#FFFFFF</item>
Chris Cromer
la source
2

Réalisez ceci en utilisant ce qui toolbarsuit:

<android.support.v7.widget.Toolbar
        android:id="@+id/base_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
Clementiano
la source
1

Essayez ceci dans votre styles.xml:

colorPrimary sera la couleur de la barre d'outils.

<resources>

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_pressed</item>
    <item name="colorAccent">@color/accent</item>
</style>

Avez-vous construit cela dans Eclipse au fait?


la source
1

J'ai résolu ce problème après plus d'études ...

pour Api21 et plus

   <item name="android:textColorPrimary">@color/white</item>

pour les versions inférieures utiliser

   <item name="actionMenuTextColor">@color/white</item>
Dinesh
la source
1

Si vous souhaitez modifier la couleur de votre barre d'outils dans l'ensemble de votre application, utilisez le fichier styles.xml. En général, j'évite de modifier les composants de l'interface utilisateur dans mon code java à moins que j'essaie de faire quelque chose par programme. S'il s'agit d'un ensemble unique, vous devriez le faire en xml pour rendre votre code plus propre. Voici à quoi ressemblera votre styles.xml:

    <!-- Base application theme. -->
<style name="YourAppName.AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Color Primary will be your toolbar color -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <!-- Color Primary Dark will be your default status bar color -->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

Assurez-vous d'utiliser le style ci-dessus dans votre AndroidManifext.xml en tant que tel:

    <application
        android:theme="@style/YourAppName.AppTheme">
    </application>

Je voulais différentes couleurs de barre d'outils pour différentes activités. J'ai donc à nouveau exploité des styles comme celui-ci:

    <style name="YourAppName.AppTheme.Activity1">
    <item name="colorPrimary">@color/activity1_primary</item>
    <item name="colorPrimaryDark">@color/activity1_primaryDark</item>
</style>

<style name="YourAppName.AppTheme.Activity2">
    <item name="colorPrimary">@color/activity2_primary</item>
    <item name="colorPrimaryDark">@color/activity2_primaryDark</item>
</style>

encore une fois, appliquez les styles à chaque activité dans votre AndroidManifest.xml en tant que tel:

<activity
    android:name=".Activity2"
    android:theme="@style/YourAppName.AppTheme.Activity2"
</activity>

<activity
    android:name=".Activity1"
    android:theme="@style/YourAppName.AppTheme.Activity1"
</activity>
Ryan Newsom
la source
0

Pour les personnes qui utilisent AppCompatActivity avec la barre d'outils en arrière-plan blanc. Utilisez ce code.

Mise à jour: décembre 2017

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_edit"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.AppBarOverlay"
        app:title="Edit Your Profile"/>

</android.support.design.widget.AppBarLayout>
zackygaurav
la source
1
Quelle est la différence avec une barre d'outils par défaut?
CoolMind