Урок 6: Cтили, темы в приложении и их кастомизация 

Собственные стили в Android

Продолжаем работать с ресурсами и сейчас я расскажу про то, как создавать собственные кастомные стили. Для объединения атрибутов во имя более удобной поддержки и расширяемости кода. Также обсудим как переопределять атрибуты стилей стандартных тем, чтобы они корректно работали на различных устройствах. Разберем файлик с темой приложения и кастомизируем ее.

Создание кастомного стиля

А теперь посмотрим внимательнее, например, на текстовый элемент варианта ответа. Я в прошлый раз не стилизовал эти TextView. Добавлю атрибуты размер шрифта и цвет.

И вот теперь для текста мы добавили уже приличный набор атрибутов: размер текста, его цвет и семейство шрифтов. И это не предел. Теперь прикинем сколько раз мы прописываем их в этом файле разметки для всех текстовых элементов. И на всех остальных будущих экранах — короче много. И если придет менеджер и попросит сделать везде размер шрифта на один пункт меньше или типа того начнутся проблемы.

Поэтому пришло время заняться созданием кастомных стилей для проекта. Цель — вынести повторяющийся набор атрибутов для разных TextView и всегда ссылаться на ограниченный набор стилей. Это кратно облегчит жизнь при массовых изменениях, ускорит разработку новых макетов и обезопасит вас от ошибок по невнимательности.

Стили нужно где-то хранить. Официальная документация рекомендует пойти в ресурсы и в папке values создать файл styles.xml.

Создаем его через контекстное меню.

Далее внутри обязательного системного тега resources добавляем новый тег style.

Создание и применение стиля

Для создания стиля через тэг style нужно указать минимум один атрибут — это name. В нем указываем произвольное название. Сами атрибуты текста, которые указывались в разметке, здесь добавляются в виде “айтемов”. item — это тоже тег, но уже вложенный. У него есть атрибут name — в нем указывается желаемый атрибут для кастомизации из разметки. А само значение устанавливается внутри. Добавляем ссылку на шрифт. По аналогии добавим размер текста и цвет.

Здесь прекрасно все кроме захардкоженного значения цвета. Для ресурсов цветов у нас есть отдельный файл colors.xml. Идем туда и по аналогии с имеющимися цветами создаем новый с осмысленным названием. Например, textVariantsColor. Добавляем ссылку на него в наш кастомный стиль.

Переопределение родительского стиля

Данным стилем мы задали только определенный набор атрибутов, все остальные атрибуты текста берутся из компонента и устанавливаются по-умолчанию. То есть если я укажу в стиле только шрифт, размер и цвет останутся стандартные. Но все же документация рекомендует всегда явно прописывать стиль, для которого производится расширение.

Мы можем взять некий системный стиль, с его встроенными свойствами и переопределить только необходимый. Такая механика вам может пригодиться для настройки темы приложения или для работы с компонентами Material Design.

Чтобы унаследоваться от определенного стиля добавляем атрибут parent. Документация рекомендует всегда наследовать базовые стили от библиотеки поддержки Android. Стили библиотеки совместимы и оптимизированы для различных устройств. Чтобы выбрать родительский стиль именно из библиотеки поддержки, в названии должно быть AppCompat. Для текста — это TextAppearance.AppCompat.

Типы наследования стиля

Еще пара слов про наследование стиля. Существует 2 вида наследования.

• Явное наследование — в текущем примере мы применили именно его. Это когда родитель указывается в атрибуте parent. А в атрибуте name просто прописывается название вашего стиля.
• Неявное наследование — когда мы указываем относительный путь от родителя до названия вашего кастомного стиля. В этом случае parent уже не пишется и переносится в name.

В целом можете выбирать тип, который нравится.

Расскажу еще про один универсальный прием работы со стилями в проекте. Когда у вас много экранов и хорошо прописанный гайдлайн в макете — мы можем создавать иерархию стилей. Что это значит.

• У нас есть некий базовый переопределенный стиль со своим названием.
• Мы создаем для него дочерний стиль (указывая в качестве родителя уже наш собственный базовый стиль) и переопределяем только нужные атрибуты.

Например, есть некий базовый стиль BaseText. Допустим, для заголовков нужно оставить шрифт и цвет, но изменить только размер. И мы создаем новый стиль с одним переопределенным элементом. И его название будет, если использовать неявное наследование, таким: BaseText.Header1, BaseText.Header2 и так далее по аналогии.

Все. Теперь нам останется сделать в файле разметки — это добавить атрибут style, передать в него ссылку на этот стиль и выпилить ставшими неактуальными дублирующие атрибуты текста. Отлично, мы только что избавили себя от кучи возможных проблем.

Темы и кастомизация

Давайте обратим внимание на файлик ресурсов themes.xml. В проекте по умолчанию приложение имеет тему “Theme.Material3.DayNight.NoActionBar”. Сначала разберем из чего состоит название родительской темы.

• Theme.Material3 — самая свежая на сегодняшний день тема из спецификации Material Design. Тема содержит разнообразный набор дочерних конфигураций.
• DayNight — говорит о том, что тема поддерживает переключение между светлой и темной темами.
• NoActionBar — собственно говорит о том, что эта тема без ActionBar. Если вы уберете эту конфигурацию в родителе и перезапустите приложение, можно будет увидеть эту кастомизируемую панель действий. На ней по умолчанию отображается название приложения.

Далее мы видим закомментированный пример того, как можно переопределять общие стандартные цвета темы. Но здесь можно переопределять не только цвета, а также шрифты и текст, элементы интерфейса, анимации и так далее. Все будет зависеть от ваших специфичных задач.

Это был базовый стиль темы приложения. Он содержит общие для всех экранов атрибуты. Ниже сгенерирована заготовка “Theme.EnglishWordsApp”. Ее можно использовать для модификации базового стиля для различных частей или экранов приложения. Конечно, этот стиль может быть не один и у него также могут быть дочерние переопределенные темы.

Кастомизация StatusBar (не путать с ActionBar)

Ну и в качестве практики предлагаю перекрасить статус бар нашего активити. Сейчас он имеет довольно симпатичный цвет, но для нашей темы более подходящим будет белый цвет с темными значками.

Для перекраски через тему пишем новый айтем statusBarColor со значением нужного цвета. Устанавливаем ссылку на белый. Чтобы иконки не сливались с фоном указываем специальный айтем windowLightStatusBar со значением true.

<item name="android:statusBarColor">@color/white</item>
<item name="android:windowLightStatusBar">true</item>

Запускаем и видим, что теперь получился более целостный вид экрана. Если вы поддерживаете темную тему, не забудьте перейти в файл themes.xml из каталога values-nught и указать обратные значения. Точнее указав соответствующий цвет вашего фона для темной темы.