MenuItem-Tönung in der AppCompat-Symbolleiste

Wenn ich Drawables aus dem AppCompat für meine ToolbarMenüpunkte Bibliothek die Tönung wie erwartet. So was:

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

Aber wenn ich meine eigenen Drawables benutze oder sogar die Drawables aus dem kopiere AppCompat Bibliothek in mein eigenes Projekt , wird es überhaupt nicht .

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

Gibt es eine besondere Magie in den AppCompat Toolbarnur Farbtönen aus dieser Bibliothek? Gibt es eine Möglichkeit, dies mit meinen eigenen Drawables zum Laufen zu bringen?

Ausführen auf einem API Level 19-Gerät mit compileSdkVersion = 21 und aus targetSdkVersion = 21und verwenden Sie auch alles vonAppCompat

abc_ic_clear_mtrl_alpha_copy ist eine exakte Kopie der abc_ic_clear_mtrl_alpha PNG vonAppCompat

Bearbeiten:

Die Tönung basiert auf dem Wert, den ich festgelegt habe android:textColorPrimary in meinem Thema festgelegt habe.

Z.B <item name="android:textColorPrimary">#00FF00</item> würde mir eine grün gefärbte Farbe geben.

Screenshots

Tönung funktioniert erwartungsgemäß mit Drawable von AppCompat

Tönung funktioniert nicht mit aus AppCompat kopiertem Zeichen

Wenn Sie sich den Quellcode des TintManager in AppCompat ansehen, werden Sie Folgendes sehen:

/**
 * 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
};

Was ziemlich genau bedeutet, dass sie bestimmte Ressourcen-IDs auf der Whitelist haben, die getönt werden sollen.

Aber ich denke, Sie können immer sehen, wie sie diese Bilder tönen und dasselbe tun. Es ist so einfach, wie den ColorFilter auf ein Zeichenelement zu setzen.

Nach der neuen Support-Bibliothek v22.1 können Sie Folgendes verwenden:

  @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;
    }

Das Einstellen von a ColorFilter(Farbton) auf a MenuItemist einfach. Hier ist ein Beispiel:

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

Der obige Code ist sehr hilfreich, wenn Sie verschiedene Themen unterstützen möchten und keine zusätzlichen Kopien nur für die Farbe oder Transparenz haben möchten.

Klicken Sie hier, um eineColorFilterHilfsklasse für alle Zeichen in einem Menü festzulegen, einschließlich des Überlaufsymbols.

In onCreateOptionsMenu(Menu menu)nur Anruf MenuColorizer.colorMenu(this, menu, color);nach dem Menü und voila Aufblasen; Ihre Symbole sind getönt.

app:iconTintDas Attribut wird in SupportMenuInflaterder Support-Bibliothek implementiert (mindestens in 28.0.0).

Erfolgreich mit API 15 und höher getestet.

Menü Ressourcendatei:

<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 diesem Fall ?attr/appIconColorEnabledwar ein benutzerdefiniertes Farbattribut in den Themen der App enthalten, und die Symbolressourcen waren Vektorzeichnungen.)

Ich persönlich habe diesen Ansatz über diesen Link bevorzugt

Erstellen Sie ein XML-Layout mit folgenden Elementen:

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

und verweisen Sie auf dieses Zeichen aus Ihrem Menü:

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

Die meisten Lösungen in diesem Thread verwenden entweder eine neuere API oder Reflection oder verwenden eine intensive Ansichtssuche, um zum aufgeblasenen zu gelangen MenuItem .

Es gibt jedoch einen eleganteren Ansatz, um dies zu tun. Sie benötigen eine benutzerdefinierte Symbolleiste, da Ihr Anwendungsfall "Benutzerdefinierten Farbton anwenden" mit der öffentlichen Styling- / Theming-API nicht gut funktioniert.

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

}

Stellen Sie einfach sicher, dass Sie Ihren Aktivitäts- / Fragmentcode eingeben:

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

Keine Reflexion, keine Ansichtssuche und nicht so viel Code, oder?

Und jetzt können Sie das Lächerliche ignorieren onCreateOptionsMenu/onOptionsItemSelected.

Hier ist die Lösung, die ich benutze; Sie können es nach onPrepareOptionsMenu () oder dem entsprechenden Ort aufrufen. Der Grund für mutate () ist, wenn Sie die Symbole an mehreren Stellen verwenden. Ohne die Mutation werden sie alle den gleichen Farbton annehmen.

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

Der Überlauf wird dadurch nicht behoben, aber dafür können Sie Folgendes tun:

Layout:

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

Stile:

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

Dies funktioniert ab Appcompat v23.1.0.