Material You

В 2021 году на Google I/O представили новую версию Material под номером 3 под названием Material You.

Цветовая схема

Material Design в целом состоит из шести ключевых цветов:

Primary
Secondary
Background
Surface
Error
Outline

Primary и Secondary — первичный и вторичный цвета, основные акцентные цвета приложения. Это основные цвета для бренда.

Background и Surface — цвета поверхностей, на которых располагается контент. Background используется для фона приложения, а Surface определяет цвет поверхностей компонентов в приложении.

Error — цвет для отображения ошибок.

Outline — цвет для обводки различных компонентов. Знаком по компоненту Outlined Text Field.

В дополнение к основным цветам есть ещё цвета с префиксом On (OnPrimary, OnSurface, OnError и т.д). On-цвета нужны, чтобы идеально смотреться на поверхностях, окрашенных в основной или второстепенный цвета, цвета поверхности, фона или ошибки.

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

В палитру Material You добавили Tertiary-цвет и все его вариации. Tertiary — третий цвет для айдентики бренда наряду с Primary и Secondary: иногда двумя цветами бренду ограничиться непросто.

Появился новый Surface-цвет — SurfaceVariant (вместе с OnSurfaceVariant). Это второй вариант для цветов поверхностей. Можно использовать, например, в качестве цвета текста на поверхностях или цвета разделителей.

Ещё одна новинка палитры Material — Container-цвета. Container-цвета — новая вариация цветов, которая используется в контейнерах с компонентами. Яркий пример — Floating Action Button. Начиная с Material 3, цвет фона у этой кнопки стал PrimaryContainer, а цвет контента на этой кнопке — OnPrimaryContainer. У Container вариаций также есть On-цвет.

Dynamic Color

Dynamic Color — одно из главных нововведений Material 3. Dynamic Color (динамический цвет) — новая функциональность, которая генерирует цветовую палитру на основе используемых обоев пользователя и распространяет её на все приложения в системе, которые поддерживают Dynamic Color.

Цвет генерируется следующим образом. Цветовую палитру создаёт встроенный в Android 12 Monet Engine: он извлекает из обоев так называемый seed color и по нему генерирует палитру.

Тональная палитра состоит из тринадцати тонов, включая белый и чёрный. Значение тона 100 эквивалентно представлению о максимальном освещении и даёт белый цвет. Значение тона 0 — чистый чёрный цвет. Каждое значение тона от 0 до 100 выражает количество света, присутствующего в цвете.

В Android генерируется пять ключевых цветов:

Accent1 (используется для Primary)
Accent2 (для Secondary)
Accent3 (для Tertiary)
Neutral1 (для Background и Surface)
Neutral2 (для SurfaceVariant и Outline)

Плюс 13 их вариантов с разной тональностью.


val dynamicColor = isDynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
    val colorScheme = when {
        dynamicColor && isDarkTheme -> dynamicDarkColorScheme(LocalContext.current)
        dynamicColor && !isDarkTheme -> dynamicLightColorScheme(LocalContext.current)
        isDarkTheme -> MyAppDarkColorScheme
        else -> MyAppLightColorScheme
    }

Сгенерировать свою палитру по канонам Material 3 можно с помощью Material Theme Builder. Также оттуда можно выгружать темы в виде стилей XML и стилей Jetpack Compose. Также доступен плагин Figma.

В Material 3 обновили гайдлайны по UI-компонентам: кнопкам, чипам, диалогам, карточкам и панели навигации. Сolor mapping у всех компонентов соответствует гайдлайнам Material 3 и поддерживает Dynamic Color.

Кнопки

Обновили обычные кнопки, FAB (floating action button) и Extended FAB.

У обычных кнопок полностью закруглили углы. Поменяли размеры кнопок: стандартную высоту подняли с 36dp до 40dp, размер иконки в кнопке увеличили до 18dp.

Текст в кнопках теперь пишется не капсом, а с большой буквы (sentence case).

Добавили 3 типа кнопок: filled — с бэкграундом primary, secondary, tertiary или какого угодно цвета, filled tonal — с бэкграундом container цвета) и elevated кнопки — с тенью.

Новое в FAB: Изменили форму, теперь FAB — квадратные с закруглёнными углами, а не круглые. Добавили новый тип — Large FAB.

Обновили цветовую палитру кнопки: теперь бэкграунд по гайдлайнам должен иметь Container-цвет (Primary, Secondary или Tertiary), а контент на кнопке — соответствующий On-Container цвет.

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

Чипы (chips)

Чипы — компоненты, которые помогают пользователю вводить и фильтровать информацию. Что нового: Обновили форму компонента. Теперь они все одинаковые: прямоугольные с закруглениями по углам.

Разделили чипы на четыре типа: Assist, Filter, Input, Suggestion.

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

Filter — кнопка для фильтрации данных.

Input — данные, которые были введены пользователем. Яркий пример: ввод адреса электронной почты, когда данные из текстового поля преобразуются в данные в чипе.

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

Диалоговые окна

Обновления в диалогах.

Увеличили отступ у контента
Увеличили радиус закругления углов
Обновили шрифты
В стандартный диалог добавили иконку над заголовком диалога