Как отобразить иконку в Navigation Drawer в оригинале

Быстрый ответ

Отойдём от серости! Если вы хотите допустить отображение исходных цветов ваших иконок в навигационном меню, уберите цветовой фильтр, присвоив ему значение null. Это можно сделать в XML-файле или непосредственно в Java-коде:

XML:

app:itemIconTint="@null"

Java:

navigationView.setItemIconTintList(null);

После этой небольшой корректировки иконки вашего приложения покажут свои исходные цвета, избегнув типичного для Android серого перекрашивания.

Освоение управления: Пользовательские цвета и состояния иконок

Глубокое погружение в список цветовых состояний

Хотите установить определённые цвета для различных состояний UI элементов? Создайте список цветовых состояний в XML-файле и поместите его в папку res/color/. Вот его пример:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#FFCC00"/> <!-- Золотистый для выбранного состояния -->
    <item android:color="#FFFFFF"/> <!-- Белый для обычного состояния -->
</selector>

Применить этот список к элементам навигационного меню можно через Java код или с помощью стилей в XML.

Подробнее об этом расскажет наш спикер на видео

Моментальная смена цвета иконок с помощью setColorFilter

Для мгновенной смены цвета иконок во время работы приложения используйте метод setColorFilter:

drawerItem.getIcon().mutate().setColorFilter(ContextCompat.getColor(context, R.color.your_awesome_color), PorterDuff.Mode.SRC_ATOP);

Не забывайте вызывать метод mutate() для иконки перед окрашиванием, чтобы избежать изменения цвета у всех экземпляров Drawable, используемых в приложении.

Визуализация

Серый облик выглядит скучно:

До: [🖼️ (серая иконка)] – Серый тональность не добавляет шарма моим замечательным иконкам.

Верните иконкам их оригинальные цвета, используя прозрачный фильтр:

drawerItem.getIcon().mutate().setColorFilter(null);

Теперь они заиграли новыми красками:

После: [🎨 (разноцветная иконка)] – И вот она, разноцветная иконка во всей своей красе!

Стилистика: значение эстетики

Гармоничное и привлекательное навигационное меню может сильно повысить оценку пользователей вашего приложения. Использование исходных цветов иконок подчёркивает индивидуальность вашего бренда и обеспечивает приятный пользовательский опыт.

Единый стиль иконок в XML: причёсываем интерфейс

Если вам нужна унифицированная окраска иконок для создания стильного, минималистичного интерфейса, это можно настроить в XML-файле навигационного меню:

<item
    android:id="@+id/nav_camera"
    android:icon="@drawable/ic_camera"
    app:itemIconTint="@android:color/white"
    android:title="@string/camera" />

Такой подход поможет добиться единобразия цветов и условной индикации активного или пассивного состояний иконок.

Полезные материалы

1. Привязка UI-компонентов к NavController с помощью NavigationUI | Документация разработчиков Android — отличный ресурс для интеграции навигационного меню с UI-компонентами.
2. Чек-лист Material Design для Android – Блог разработчиков Android — обязательный чек-лист для реализации принципов Material Design в Android-приложениях.
3. Навигационная панель с фрагментами | Руководство CodePath для Android — подробное руководство по созданию навигационной панели с использованием фрагментов для Android.
4. Статья на Medium о настройке навигационной панели на Android — погрузитесь в мир персонализированных навигационных панелей и выделите значимость цвета иконок.
5. Material Design — разберитесь во всех тонкостях тематизации иконок в Material Design, чтобы поддерживать цветовую гармонию иконок в вашем меню.