Как отобразить иконку в 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" />
Такой подход поможет добиться единобразия цветов и условной индикации активного или пассивного состояний иконок.
Полезные материалы
- Привязка UI-компонентов к NavController с помощью NavigationUI | Документация разработчиков Android — отличный ресурс для интеграции навигационного меню с UI-компонентами.
- Чек-лист Material Design для Android – Блог разработчиков Android — обязательный чек-лист для реализации принципов Material Design в Android-приложениях.
- Навигационная панель с фрагментами | Руководство CodePath для Android — подробное руководство по созданию навигационной панели с использованием фрагментов для Android.
- Статья на Medium о настройке навигационной панели на Android — погрузитесь в мир персонализированных навигационных панелей и выделите значимость цвета иконок.
- Material Design — разберитесь во всех тонкостях тематизации иконок в Material Design, чтобы поддерживать цветовую гармонию иконок в вашем меню.