ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку

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

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

XML:

xml
Скопировать код
app:itemIconTint="@null"

Java:

Java
Скопировать код
navigationView.setItemIconTintList(null);

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

Пройдите тест и узнайте подходит ли вам сфера IT
Пройти тест

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

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

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

xml
Скопировать код
<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:

Java
Скопировать код
drawerItem.getIcon().mutate().setColorFilter(ContextCompat.getColor(context, R.color.your_awesome_color), PorterDuff.Mode.SRC_ATOP);

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

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

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

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

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

Java
Скопировать код
drawerItem.getIcon().mutate().setColorFilter(null);

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

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

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

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

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

Если вам нужна унифицированная окраска иконок для создания стильного, минималистичного интерфейса, это можно настроить в 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, чтобы поддерживать цветовую гармонию иконок в вашем меню.