Colorazione MenuItem sulla barra degli strumenti AppCompat

Quando uso i drawable dalla AppCompatlibreria per le mie Toolbarvoci di menu, la colorazione funziona come previsto. Come questo:

<item
    android:id="@+id/action_clear"
    android:icon="@drawable/abc_ic_clear_mtrl_alpha"  <-- from AppCompat
    android:title="@string/clear" />

Ma se uso i miei disegnabili o addirittura copio i disegnabili dalla AppCompatlibreria al mio progetto, non si colorerà affatto.

<item
    android:id="@+id/action_clear"
    android:icon="@drawable/abc_ic_clear_mtrl_alpha_copy"  <-- copy from AppCompat
    android:title="@string/clear" />

C'è qualche magia speciale AppCompat Toolbarnell'unica tinta drawables da quella libreria? Qualche modo per farlo funzionare con i miei drawable?

Eseguendolo su un dispositivo API di livello 19 con compileSdkVersion = 21e targetSdkVersion = 21e utilizzando anche tutto daAppCompat

abc_ic_clear_mtrl_alpha_copyè una copia esatta del abc_ic_clear_mtrl_alphapng daAppCompat

Modificare:

La colorazione si basa sul valore che ho impostato android:textColorPrimarynel mio tema.

Ad esempio <item name="android:textColorPrimary">#00FF00</item>, mi darebbe una tinta verde.

Screenshot

La colorazione funziona come previsto con drawable da AppCompat

La colorazione non funziona con il disegno copiato da AppCompat

Perché se dai un'occhiata al codice sorgente di TintManager in AppCompat, vedrai:

/**
 * Drawables which should be tinted with the value of {@code R.attr.colorControlNormal},
 * using the default mode.
 */
private static final int[] TINT_COLOR_CONTROL_NORMAL = {
        R.drawable.abc_ic_ab_back_mtrl_am_alpha,
        R.drawable.abc_ic_go_search_api_mtrl_alpha,
        R.drawable.abc_ic_search_api_mtrl_alpha,
        R.drawable.abc_ic_commit_search_api_mtrl_alpha,
        R.drawable.abc_ic_clear_mtrl_alpha,
        R.drawable.abc_ic_menu_share_mtrl_alpha,
        R.drawable.abc_ic_menu_copy_mtrl_am_alpha,
        R.drawable.abc_ic_menu_cut_mtrl_alpha,
        R.drawable.abc_ic_menu_selectall_mtrl_alpha,
        R.drawable.abc_ic_menu_paste_mtrl_am_alpha,
        R.drawable.abc_ic_menu_moreoverflow_mtrl_alpha,
        R.drawable.abc_ic_voice_search_api_mtrl_alpha,
        R.drawable.abc_textfield_search_default_mtrl_alpha,
        R.drawable.abc_textfield_default_mtrl_alpha
};

/**
 * Drawables which should be tinted with the value of {@code R.attr.colorControlActivated},
 * using the default mode.
 */
private static final int[] TINT_COLOR_CONTROL_ACTIVATED = {
        R.drawable.abc_textfield_activated_mtrl_alpha,
        R.drawable.abc_textfield_search_activated_mtrl_alpha,
        R.drawable.abc_cab_background_top_mtrl_alpha
};

/**
 * Drawables which should be tinted with the value of {@code android.R.attr.colorBackground},
 * using the {@link android.graphics.PorterDuff.Mode#MULTIPLY} mode.
 */
private static final int[] TINT_COLOR_BACKGROUND_MULTIPLY = {
        R.drawable.abc_popup_background_mtrl_mult,
        R.drawable.abc_cab_background_internal_bg,
        R.drawable.abc_menu_hardkey_panel_mtrl_mult
};

/**
 * Drawables which should be tinted using a state list containing values of
 * {@code R.attr.colorControlNormal} and {@code R.attr.colorControlActivated}
 */
private static final int[] TINT_COLOR_CONTROL_STATE_LIST = {
        R.drawable.abc_edit_text_material,
        R.drawable.abc_tab_indicator_material,
        R.drawable.abc_textfield_search_material,
        R.drawable.abc_spinner_mtrl_am_alpha,
        R.drawable.abc_btn_check_material,
        R.drawable.abc_btn_radio_material
};

/**
 * Drawables which contain other drawables which should be tinted. The child drawable IDs
 * should be defined in one of the arrays above.
 */
private static final int[] CONTAINERS_WITH_TINT_CHILDREN = {
        R.drawable.abc_cab_background_top_material
};

Il che significa più o meno che hanno particolari resourceId nella lista bianca per essere colorati.

Ma immagino che tu possa sempre vedere come colorano quelle immagini e fare lo stesso. È facile come impostare ColorFilter su un disegnabile.

Dopo la nuova libreria di supporto v22.1, puoi usare qualcosa di simile a questo:

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_home, menu);
        Drawable drawable = menu.findItem(R.id.action_clear).getIcon();

        drawable = DrawableCompat.wrap(drawable);
        DrawableCompat.setTint(drawable, ContextCompat.getColor(this,R.color.textColorPrimary));
        menu.findItem(R.id.action_clear).setIcon(drawable);
        return true;
    }

Impostare una ColorFilter(tinta) su a MenuItemè semplice. Ecco un esempio:

Drawable drawable = menuItem.getIcon();
if (drawable != null) {
    // If we don't mutate the drawable, then all drawable's with this id will have a color
    // filter applied to it.
    drawable.mutate();
    drawable.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
    drawable.setAlpha(alpha);
}

Il codice sopra è molto utile se vuoi supportare temi diversi e non vuoi avere copie extra solo per il colore o la trasparenza.

Fare clic qui per una classe helper per impostare unColorFiltersu tutti i drawables in un menu, inclusa l'icona di overflow.

In onCreateOptionsMenu(Menu menu)appena chiamata MenuColorizer.colorMenu(this, menu, color);dopo aver gonfiato il vostro menu e voilà; le tue icone sono colorate.

app:iconTintl'attributo è implementato SupportMenuInflaterdalla libreria di supporto (almeno nella 28.0.0).

Testato con successo con API 15 e versioni successive.

File di risorse del menu:

<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/menu_settings"
        android:icon="@drawable/ic_settings_white_24dp"
        app:iconTint="?attr/appIconColorEnabled"        <!-- using app name space instead of android -->
        android:menuCategory="system"
        android:orderInCategory="1"
        android:title="@string/menu_settings"
        app:showAsAction="never"
        />

    <item
        android:id="@+id/menu_themes"
        android:icon="@drawable/ic_palette_white_24dp"
        app:iconTint="?attr/appIconColorEnabled"
        android:menuCategory="system"
        android:orderInCategory="2"
        android:title="@string/menu_themes"
        app:showAsAction="never"
        />

    <item
        android:id="@+id/action_help"
        android:icon="@drawable/ic_help_white_24dp"
        app:iconTint="?attr/appIconColorEnabled"
        android:menuCategory="system"
        android:orderInCategory="3"
        android:title="@string/menu_help"
        app:showAsAction="never"
        />

</menu>

(In questo caso ?attr/appIconColorEnabledera un attributo di colore personalizzato nei temi dell'app e le risorse delle icone erano disegnabili con vettori.)

Personalmente ho preferito questo approccio da questo collegamento

Crea un layout XML con quanto segue:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_action_something"
    android:tint="@color/color_action_icons_tint"/>

e fai riferimento a questo disegnabile dal tuo menu:

<item
    android:id="@+id/option_menu_item_something"
    android:icon="@drawable/ic_action_something_tined"

La maggior parte delle soluzioni in questo thread utilizza un'API più recente o la riflessione o utilizza la ricerca della vista intensiva per arrivare al gonfiato MenuItem .

Tuttavia, c'è un approccio più elegante per farlo. Hai bisogno di una barra degli strumenti personalizzata, poiché il tuo caso d'uso "applica tinta personalizzata" non funziona bene con l'API pubblica per stili / temi.

public class MyToolbar extends Toolbar {
    ... some constructors, extracting mAccentColor from AttrSet, etc

    @Override
    public void inflateMenu(@MenuRes int resId) {
        super.inflateMenu(resId);
        Menu menu = getMenu();
        for (int i = 0; i < menu.size(); i++) {
            MenuItem item = menu.getItem(i);
            Drawable icon = item.getIcon();
            if (icon != null) {
                item.setIcon(applyTint(icon));
            }
        }
    }
    void applyTint(Drawable icon){
        icon.setColorFilter(
           new PorterDuffColorFilter(mAccentColor, PorterDuff.Mode.SRC_IN)
        );
    }

}

Assicurati solo di chiamare il tuo codice attività / frammento:

toolbar.inflateMenu(R.menu.some_menu);
toolbar.setOnMenuItemClickListener(someListener);

Nessun riflesso, nessuna ricerca vista e non tanto codice, eh?

E ora puoi ignorare il ridicolo onCreateOptionsMenu/onOptionsItemSelected.

Ecco la soluzione che utilizzo; puoi chiamarlo dopo onPrepareOptionsMenu () o il posto equivalente. Il motivo per mutate () è se ti capita di usare le icone in più di una posizione; senza il mutato, assumeranno tutti la stessa tinta.

public class MenuTintUtils {
    public static void tintAllIcons(Menu menu, final int color) {
        for (int i = 0; i < menu.size(); ++i) {
            final MenuItem item = menu.getItem(i);
            tintMenuItemIcon(color, item);
            tintShareIconIfPresent(color, item);
        }
    }

    private static void tintMenuItemIcon(int color, MenuItem item) {
        final Drawable drawable = item.getIcon();
        if (drawable != null) {
            final Drawable wrapped = DrawableCompat.wrap(drawable);
            drawable.mutate();
            DrawableCompat.setTint(wrapped, color);
            item.setIcon(drawable);
        }
    }

    private static void tintShareIconIfPresent(int color, MenuItem item) {
        if (item.getActionView() != null) {
            final View actionView = item.getActionView();
            final View expandActivitiesButton = actionView.findViewById(R.id.expand_activities_button);
            if (expandActivitiesButton != null) {
                final ImageView image = (ImageView) expandActivitiesButton.findViewById(R.id.image);
                if (image != null) {
                    final Drawable drawable = image.getDrawable();
                    final Drawable wrapped = DrawableCompat.wrap(drawable);
                    drawable.mutate();
                    DrawableCompat.setTint(wrapped, color);
                    image.setImageDrawable(drawable);
                }
            }
        }
    }
}

Questo non si prenderà cura dell'overflow, ma per quello, puoi farlo:

Disposizione:

<android.support.v7.widget.Toolbar
    ...
    android:theme="@style/myToolbarTheme" />

Stili:

<style name="myToolbarTheme">
        <item name="colorControlNormal">#FF0000</item>
</style>

Funziona a partire da appcompat v23.1.0.