web-dev-qa-db-fra.com

Changer la couleur de l'icône de débordement de la barre d'outils

J'ai un Android.support.v7.widget Barre d'outils dans mon Android. La couleur d'arrière-plan est orange vif et la plus belle couleur en plus serait le blanc au lieu du noir.

J'ai la couleur par défaut sur le noir et non sur le blanc. Comme cela entrerait en conflit avec d'autres choses, c'est presque impossible à contourner. Je ne peux pas changer la couleur principale du texte en blanc!

J'ai réussi à changer la couleur du titre. Ce que je recherche en ce moment, c'est comment je peux également changer la couleur du bouton d'action (en blanc).

enter image description here

Mon code:

Activité principale:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
xmlns:app="http://schemas.Android.com/apk/res-auto"
tools:context=".UI.activities.MainActivity">

<Android.support.v7.widget.Toolbar
    Android:id="@+id/r2_toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    Android:background="?attr/colorPrimary"
    Android:elevation="4dp"
    app:titleTextColor="@color/primary_text_material_light"
    app:subtitleTextColor="@color/primary_text_material_light"
    Android:theme="@style/R2Theme.Toolbar"/>

<fragment Android:name="com.r2retail.r2retailapp.UI.fragments.SetupFragment"
    Android:layout_below="@+id/r2_toolbar"
    Android:id="@+id/list"
    Android:layout_weight="1"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" />


</RelativeLayout>

Barre de menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto">

<item Android:id="@+id/about"
    Android:icon="@drawable/ic_menu"
    Android:title="About"
    app:showAsAction="never"/>

</menu>

Modes:

<resources>

<style name="R2Theme" parent="Theme.AppCompat.Light.NoActionBar">=
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorPrimary</item>
    <item name="Android:textColorPrimary">@color/secondary_text_material_dark</item>
    <item name="Android:textColorSecondaryInverse">@color/primary_text_material_light</item>
</style>

<style name="R2Theme.Toolbar" parent="R2Theme">
    <item name="actionMenuTextColor">@color/primary_text_material_light</item>
</style>

</resources>
javaandroidandroid-layoutandroid-viewandroid-toolbar
16
Dennis van der Veeke

Dans les styles:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="actionOverflowButtonStyle">@style/MyOverflowButtonStyle</item>
</style>

<style name="MyOverflowButtonStyle" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="Android:tint">#62ff00</item>
</style>

Résultat:

enter image description here

49
azizbekian

Une manière alternative, en code au lieu de XML:

public static boolean colorizeToolbarOverflowButton(@NonNull Toolbar toolbar, @ColorInt int color) {
    final Drawable overflowIcon = toolbar.getOverflowIcon();
    if (overflowIcon == null)
        return false;
    toolbar.setOverflowIcon(getTintedDrawable(toolbar.getContext(), overflowIcon, toolbarIconsColor));
    return true;
}

public static Drawable getTintedDrawable(@NonNull Context context, @NonNull Drawable inputDrawable, @ColorInt int color) {
    Drawable wrapDrawable = DrawableCompat.wrap(inputDrawable);
    DrawableCompat.setTint(wrapDrawable, color);
    DrawableCompat.setTintMode(wrapDrawable, Mode.SRC_IN);
    return wrapDrawable;
}

La fonction retournera true si elle réussit à coloriser l'icône de débordement.

Et une autre alternative, au cas où vous préféreriez ne pas utiliser un étirable teinté:

public static boolean colorizeToolbarOverflowButton(@NonNull Toolbar toolbar, @ColorInt Integer color) {
    final Drawable overflowIcon = toolbar.getOverflowIcon();
    if (overflowIcon == null)
        return false;
    final PorterDuffColorFilter colorFilter = toolbarIconsColor == null ? null : new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.MULTIPLY);
    overflowIcon.setColorFilter(colorFilter);
    return true;
}
2
android developer

La solution consiste à remplacer l'icône elle-même.

1er

Allez dans valeurs/styles et dans votre styles.xml ajout de fichier:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="Android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
</style>

<style name="MyActionButtonOverflow" parent="Android:style/Widget.Holo.Light.ActionButton.Overflow">
    <!--Here you need to put name of drawable you will create during the next step-->
    <item name="Android:src">@drawable/your_white_icon</item> 
</style>

2e

Allez ensuite dans le dossier dessinable . Clic droit de la souris -> nouveau -> ressource vectorielle. Ensuite, appuyez sur Icône image et choisissez parmi l'icône suggérée nommée ic_more_vert_black_24dp .

Personnalisez-le -> appuyez sur suivant -> terminer.

Ouvrez ensuite le fichier d'icônes nouvellement créé. Le code ressemble à ceci.

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:width="24dp"
        Android:height="24dp"
        Android:viewportWidth="24.0"
        Android:viewportHeight="24.0">
    <path
        Android:fillColor="#FFFFFFFF" <!-- Here u can change color-->
        Android:pathData="M12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zM12,16c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"/>
</vector>

Remplacez l'attribut fillColor par la couleur dont vous avez besoin. Mettez ce fichier dans les styles décrits dans la 1ère étape.

Voila! La couleur de notre trois points n'a pas changé en fonction des styles d'application de base (résultat pour la couleur # FF2012).

enter image description here

1
Dmitry Smolyaninov