Тонування MenuItem на панелі інструментів AppCompat

Коли я використовую малюнки з AppCompatбібліотеки для своїх Toolbarпунктів меню, тонування працює належним чином. Подобається це:

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

Але якщо я використовую власні малюнки або навіть фактично скопіюю малюнки з AppCompatбібліотеки у свій власний проект, це взагалі не забарвиться.

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

Чи є якась особлива магія в тому, AppCompat Toolbarщо лише відтінки малюнків із цієї бібліотеки? Будь-який спосіб змусити це працювати зі своїми власними малюнками?

Запуск цього на пристрої API рівня 19 з compileSdkVersion = 21та targetSdkVersion = 21, а також використання всього відAppCompat

abc_ic_clear_mtrl_alpha_copyє точною копією abc_ic_clear_mtrl_alphaPNG ізAppCompat

Редагувати:

Тонування базується на значенні, яке я встановив android:textColorPrimaryу своїй темі.

Наприклад, <item name="android:textColorPrimary">#00FF00</item>це дало б мені зелений відтінок.

Знімки екрана

Тонування працює, як очікувалося, з можливістю малювання з AppCompat

Тонування не працює з копіюваним з AppCompat малюнком

Тому що, якщо ви подивитесь на вихідний код TintManager в AppCompat, ви побачите:

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

Що в значній мірі означає, що вони мають конкретні ідентифікатори ресурсів, включені до білого списку, щоб бути тонованими.

Але я думаю, ви завжди можете побачити, як вони тонують ці зображення, і зробити те саме. Це так само просто, як встановити ColorFilter на висувний.

Після нової бібліотеки підтримки v22.1 ви можете використовувати щось подібне до цього:

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

Встановити ColorFilter(відтінок) на a MenuItemдуже просто. Ось приклад:

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

Наведений вище код дуже корисний, якщо ви хочете підтримувати різні теми, і ви не хочете мати додаткових копій лише для кольору або прозорості.

Клацніть тут, щоб допоміжний клас встановив aColorFilter для всіх малюнків у меню, включаючи піктограму переповнення.

В onCreateOptionsMenu(Menu menu)тільки виклик MenuColorizer.colorMenu(this, menu, color);після накачування вашого меню і вуаля; ваші іконки тоновані.

app:iconTintатрибут реалізований у SupportMenuInflaterз бібліотеки підтримки (принаймні в 28.0.0).

Успішно протестовано з API 15 та новіших версій.

Файл ресурсу меню:

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

(У цьому випадку ?attr/appIconColorEnabledв темах програми був атрибут власного кольору, а ресурси піктограм - векторні малюнки.)

Я особисто віддав перевагу такому підходу з цього посилання

Створіть XML-макет із наступним:

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

і зверніться до цього малюнка зі свого меню:

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

Більшість рішень у цьому потоці або використовують новіший API, або використовують відображення, або використовують інтенсивний пошук подання, щоб дістатися до завищеного MenuItem.

Однак для цього існує більш елегантний підхід. Вам потрібна власна панель інструментів, оскільки ваш варіант використання "застосувати спеціальний відтінок" погано поєднується з API загальнодоступних стилів / тематики.

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

}

Просто переконайтеся, що ви зателефонували до коду Activity / Fragment:

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

Ніякого роздуму, жодного перегляду перегляду і не так багато коду, так?

І тепер ви можете ігнорувати смішне onCreateOptionsMenu/onOptionsItemSelected.

Ось рішення, яке я використовую; ви можете зателефонувати йому після onPrepareOptionsMenu () або еквівалентного місця. Причиною мутації () є те, що випадково ви використовуєте піктограми в кількох місцях; без мутації всі вони набудуть однаковий відтінок.

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

Це не подбає про переповнення, але для цього ви можете зробити це:

Макет:

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

Стилі:

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

Це працює з appcompat v23.1.0.