​​TextAppearance или Style
#design #view

Android даёт нам несколько способов установить атрибуты стиля для TextView. Есть два самых часто используемых:
1) Применение нужных атрибутов напрямую в вёрстке:

<TextView
android:textSize="16sp"
android:textColor="#fff"

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

2) Использование Style для TextView, например:

<TextView
style="@style/Widget.MyApp.TextView"

Здесь мы уже можем переиспользовать настройки, заданные в стиле. И вроде этот подход выглядит идеальным и правильным, однако существует ещё и третий способ кастомизации TextView — это textAppearance.

<TextView
android:textAppearance="?textAppearanceBody1"

На самом деле, это довольно интересное свойство. Оно позволяет нам установить ограниченный набор атрибутов, специфичных только для текста: цвет текста, его размер, шрифт, семейство цветов и т.д. При этом, в Android Material сущестуют 13 стандартных textAppearance, которые мы можем дополнить и использовать у себя в проектах. Подробнее можно посмотреть тут.

Порядок установки атрибутов такой: сначала применяются атрибуты textAppearance, дальше атрибуты стиля, и потом те, что вы напрямую определили для View.

Подробнее можно прочитать тут.

​​Паттерны проектирования в Android разработке
#design #patterns #beginners

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

Если вы хотите связать существующие паттерны с Android-разработкой, то есть отличная статья, которая разбирает основные паттерны и описывает примеры, которые есть в Android. Вот некоторые из шаблонов: Builder, DI, Singleton, Factory, Adapter, Facade, Observer и многие другие.

Ну и обильные примеры кода также весьма радуют. Ссылка на статью тут.

​​Базовая информация о темах в Android
#theme #design #beginners

Использование тем и стилей в Android на первый взгляд достаточно простая, но при детальном рассмотрении — запутанная вещь.😑
Со временем роста проекта использование неправильно настроенных тем и стилей может быть чревато тем, что в приложении появятся противоречивые цвета или несколько оттенков одного и того же цвета.
А с миграцией на Compose, ситуация может только ухудшиться, ведь использование стилей там идёт в другом, но похожем ключе.

В Android существует довольно много элементов для тем, среди них: Attributes, Styles, Theme, TextAppearance… все они предполагают похожие элементы, но действуют по-разному.

Чтобы вам было легче разобраться во всём этом многообразии, советую прочитать эту статью. Автор не только описывает каждый из элементов стилей, но и подсказывает, когда какой правильно применить и как настроить тему в Android.

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

​​Что за Material Navigation Rail?
#design #view

Одной из фич, которая была детально рассмотрена на прошедшем Google I/O — это работа с гибкими устройствами, планшетами и большими экранами. Видео тут, а одним из упоминаний была пока не самая популярная View — Material Navigation Rail.

По сути — это вертикальный Bottom Navigation Bar. Однако, эта View подходит не во всех случаях: например, пользователь использует приложение в альбомной ориентации. В этом случае пространство внизу занято Bottom Navigation Bar, что делает использование контента менее удобным.

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

​​Google I/O Android App
#design

Думаю, что многие из вас в курсе про приложение для Google I/O со списком докладов и сессий. В этом году из-за онлайн-мероприятия приложение не пользовалось спросом и список докладов идёт из I/O 2019 года, однако ребята из Google всё равно обновили кодовую базу.

Список главных изменений:
🔸миграция с LiveData на Flow — можно как раз посмотреть, как поключить Flow к жизненному циклу фрагментов;

🔸поддержка больших экранов и разных форм-факторов — пока не смотрел доработки, которые были сделаны в этом пункте, но уверен, что там будет Navigation Rail. Не думаю, что гибкие смартфоны — это будущее в ближайшее время, но радует, что уже есть инструменты для адаптации приложений;

🔸миграция с SharedPreferences на DataStore — хороший пример реализации, после которого вы увидите, что мигрировать на новую библиотеку довольно просто. Сейчас она в beta-стадии, выглядит очень приятно.

🔸частичная поддержка Jetpack Compose — нужно переключить в отдельную ветку, чтобы посмотреть переход на Compose.

Добавлю ещё сюда поддержку Jetpack Benchmark library, которая была анонсирована на последнем I/O, она позволяет тестировать многие параметры приложения.

Единственный момент — сейчас приложение может некорректно работать на последней версии Arctic Fox, но уже создана issue на правку🤦‍♂️.

​​Splash Screen в Android 12
#design

На последнем I/O было сказано о созданном по умолчанию Splash Screen. Кроме того, что теперь он есть во всех приложениях по умолчанию, у нас появилась возможность кастомизировать настройки.

В статье автор рассказывает о своём опыте кастомизации уже существующего Splash Screen и адаптации его под новое API.

Интересно, что кроме обычных иконок, можно использовать и анимированную векторную графику. Желательно только, чтобы она вписывалась во время жизни Splash. Свойств не так много, но теперь всем, у кого уже есть Splash надо кастомизировать его под новые настройки Android 12.

​​Миграция на Material Design 3
#material #design

Весной этого года, в Google анонсировали Material You, который, по сути, является развитием Material Design.
Главная фича, которая там есть — это поддержка dynamic color, к которой можно подготовить свои приложения.
Ну и в целом, изменились правила по работе с цветами и шрифтами. Давайте посмотрим чуть подробнее, на что стоит обратить внимание.

1️⃣ Обновляем тему на Material 3 — для этого нужно заменить Theme.MaterialComponents.* на Theme.Material3.* и Widget.MaterialComponents.* на Widget.Material3.*.

2️⃣ Меняем цвета и темы — добавилось несколько цветов, а именно Tertiary color, цвета контейнеров и несколько вариантов цветов colorOnSurface. Проще всего добавить их при помощи Material Theme Builder.

3️⃣ Изменяем Typography — поменялся нейминг для вариаций шрифтов. В целом, ничего сложного, их число стало меньше и теперь они вместо номеров имеют названия Small, Medium и Large.

4️⃣ Меняем компоненты — изменился внешний вид BottomNavigationView, AppBar, FloatingActionButton и кнопок.

В целом, мне нравится. Осталось дело за главным — приспособить свои приложения к этому дизайну.
Больше деталей и информации можно найти тут.

​​Support Modern Emoji
#design

Emoji сегодня — довольно важная часть, которая используется повсеместно, будь то чаты или просто текстовые поля. Однако, не все emoji одинаково отображаются на всех устройствах.
Если мы говорим про более старые гаджеты, то вместо красивой иконки мы может получить просто квадрат. А ещё, мало кто задумывается, что комбинация из 2 и более emoji может давать новую.

Любопытная статья, которая рассказывает об отображении emoji в текстовых полях. На самом деле, есть целая библиотека, которая помогает отобразить emoji на старых устройствах, начиная с API 19. Она интегрирована в AppCompat 1.4, поэтому вам не нужно ничего докручивать.

Но очень круто почитать, как это работает под капотом и о том, что происходит если вводить emoji в текстовые поля.

​​Контракт для работы Android и Design команд
#design

Лайтовая статья, где автор делится советами для организации работы команды дизайнеров и разработчиков.

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

Советы довольно простые в использовании, но экономят кучу времени. Ссылка на статью тут.

​​Pixel perfect Android app
#design #android

Для многих не станет новостью то, что хороший дизайн — это важная часть приложения.

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

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

Из неё узнал о существовании языков с псевдолокалями, которые добавляют в привычный нам язык диалекты, а также то, что, например, немецкий язык содержит примерно на 30% больше текста, чем остальные языки. 🥸
Так что — самое время посмотреть, не разорвало ли ваши View на некоторых из языков.

​​Material You в Jetpack Compose
#design #compose

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

Попалась любопытная статья, где автор применяет библиотеку Material Design 3 к своему небольшому приложению, написанному на Compose.
Тут можно подсмотреть, как лучше хранить цвета и ресурсы для тем в Compose, как лучше сделать динамические темы, да и то, как начать переезд на эту фичу в своём приложении.

Выглядит здорово, надеюсь на поддержку этой фичи в основных приложениях.