Изменение цвета стрелки "назад" в Material Theme на API 21
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Чтобы быстро поменять цвет стрелки "назад" в Material Theme, задайте параметр android:tint
в стиле вашей панели инструментов. Например:
<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
:
<com.google.android.material.appbar.Toolbar
style="@style/ToolbarWithBackArrowColor" />
Вместо @color/custom_back_arrow_color
укажите желаемый цвет.
Детальная настройка: погружение в код
Рассмотрим подробнее, как можно изменить цвет стрелки "назад".
Изменение цвета через атрибуты темы
Можно настроить атрибут colorControlNormal
в теме вашего приложения, чтобы унифицировать цвет элементов навигации:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorControlNormal">@color/custom_back_arrow_color</item>
</style>
Изменение цвета в Java/Kotlin
Если требуется по ходу работы менять цвет стрелки программно, используйте следующий код:
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
, не внося в него изменения.
Визуализация
Изменение цвета стрелки возврата подобно включению фар на автомобиле ночью:
🚗💡 До: [←] (стандартный цвет)
🚗💡 После: [←](#FF5722) (новый цвет!)
Даже небольшие изменения могут существенно улучшить внешний вид и узнаваемость приложения.
Продвинутые методы изменения цвета
Давайте изучим продвинутые способы изменения цвета стрелки "назад".
Пользовательские изображения
Чтобы добавить пользовательские изображения, укажите их в файле селектора:
<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
, чтобы цвет стрелки соответствовал общей теме приложения:
<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>
Улучшение навигации с помощью навигационной иконки
Не ограничивайтесь одной стрелкой, можно задать и новый навигационный значок:
<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>
Полезные материалы
- Material Design — Руководство по Material Components для Android.
- Стили и темы | Разработчики Android — инструкции по настройке компонентов Material.
- java – Как изменить цвет стрелки назад в новой Material теме? – Stack Overflow — обсуждение на Stack Overflow, посвященное изменению цвета стрелки.
- Система цветов в Material Design — описание цветовой системы Material Design. Полезно при изменении цвета элементов.
- Блог разработчиков Android: Используйте Android Jetpack для ускорения вашей разработки — информация об Android Jetpack и его компонентах, включая Material Components.
- GitHub – material-components/material-components-android-examples: Примеры приложений и исходного кода для MDC-Android — примеры приложений и кода для использования для Material Design Components на Android.