Изменение цвета стрелки "назад" в Material Theme на API 21

Пройдите тест, узнайте какой профессии подходите

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

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

Чтобы быстро поменять цвет стрелки "назад" в Material Theme, задайте параметр android:tint в стиле вашей панели инструментов. Например:

xml
Скопировать код
<style name="ToolbarWithBackArrowColor" parent="Widget.MaterialComponents.Toolbar">
    <item name="android:navigationIcon">?attr/homeAsUpIndicator</item>
    <item name="android:tint">@color/custom_back_arrow_color</item>
</style>

Теперь примените этот стиль к вашему элементу Toolbar:

xml
Скопировать код
<com.google.android.material.appbar.Toolbar
    style="@style/ToolbarWithBackArrowColor" />

Вместо @color/custom_back_arrow_color укажите желаемый цвет.

Кинга Идем в IT: пошаговый план для смены профессии

Детальная настройка: погружение в код

Рассмотрим подробнее, как можно изменить цвет стрелки "назад".

Изменение цвета через атрибуты темы

Можно настроить атрибут colorControlNormal в теме вашего приложения, чтобы унифицировать цвет элементов навигации:

xml
Скопировать код
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorControlNormal">@color/custom_back_arrow_color</item>
</style>

Изменение цвета в Java/Kotlin

Если требуется по ходу работы менять цвет стрелки программно, используйте следующий код:

Java
Скопировать код
if (toolbar.getNavigationIcon() != null) {
    toolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.custom_back_arrow_color), PorterDuff.Mode.SRC_ATOP);
}

Учёт версии API

С API уровня 23 и выше можно использовать ресурс abc_ic_ab_back_material, не внося в него изменения.

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

Изменение цвета стрелки возврата подобно включению фар на автомобиле ночью:

Markdown
Скопировать код
🚗💡 До: [&larr;] (стандартный цвет)
🚗💡 После: [&larr;](#FF5722) (новый цвет!)

Даже небольшие изменения могут существенно улучшить внешний вид и узнаваемость приложения.

Продвинутые методы изменения цвета

Давайте изучим продвинутые способы изменения цвета стрелки "назад".

Пользовательские изображения

Чтобы добавить пользовательские изображения, укажите их в файле селектора:

xml
Скопировать код
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_arrow_back_black_24dp" android:tint="@color/custom_back_arrow_color" android:state_enabled="true" />
</selector>

Изменение цвета через DrawerArrowStyle

Используйте DrawerArrowStyle, чтобы цвет стрелки соответствовал общей теме приложения:

xml
Скопировать код
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="drawerArrowStyle">@style/MyDrawerArrowToggle</item>
</style>

<style name="MyDrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@color/custom_back_arrow_color</item>
</style>

Улучшение навигации с помощью навигационной иконки

Не ограничивайтесь одной стрелкой, можно задать и новый навигационный значок:

xml
Скопировать код
<style name="ToolbarIconColor" parent="Widget.MaterialComponents.Toolbar">
    <item name="android:navigationIcon">@drawable/my_custom_icon</item>
    <item name="android:tint">@color/my_custom_color</item>
</style>

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

  1. Material Design — Руководство по Material Components для Android.
  2. Стили и темы | Разработчики Android — инструкции по настройке компонентов Material.
  3. java – Как изменить цвет стрелки назад в новой Material теме? – Stack Overflow — обсуждение на Stack Overflow, посвященное изменению цвета стрелки.
  4. Система цветов в Material Design — описание цветовой системы Material Design. Полезно при изменении цвета элементов.
  5. Блог разработчиков Android: Используйте Android Jetpack для ускорения вашей разработки — информация об Android Jetpack и его компонентах, включая Material Components.
  6. GitHub – material-components/material-components-android-examples: Примеры приложений и исходного кода для MDC-Android — примеры приложений и кода для использования для Material Design Components на Android.
Свежие материалы