Материальный дизайн для Android

Попробуйте способ создания композиций.

Jetpack Compose — это рекомендуемый набор инструментов для создания пользовательского интерфейса для Android. Узнайте, как работать с темами оформления в Compose.

Материальный дизайн 3 →

Material Design — это исчерпывающее руководство по визуальному, анимационному и интерактивному дизайну для различных платформ и устройств. Чтобы использовать Material Design в своих приложениях для Android, следуйте рекомендациям, изложенным в спецификации Material Design . Если ваше приложение использует Jetpack Compose, вы можете использовать библиотеку Compose Material 3. Если ваше приложение использует представления, вы можете использовать библиотеку Android Material Components .

Android предоставляет следующие возможности для создания приложений в стиле Material Design:

• Тема оформления приложения в стиле Material Design для всех виджетов пользовательского интерфейса.
• Виджеты для сложных представлений, таких как списки и карточки.
• API для создания пользовательских теней и анимаций

Материальная тема оформления и виджеты

Чтобы воспользоваться преимуществами Material Design, такими как стилизация стандартных виджетов пользовательского интерфейса, и упростить определение стиля вашего приложения, примените к нему тему на основе Material Design.

Рисунок 1. Тема «Тёмных материалов».

Рисунок 2. Тема «Светлый материал».

Если вы используете Android Studio для создания проекта Android, по умолчанию применяется тема Material. Чтобы узнать, как обновить тему проекта, см. раздел «Стили и темы» .

Чтобы обеспечить пользователям привычный интерфейс, используйте наиболее распространенные шаблоны UX из Material Design:

• Выделите основное действие пользовательского интерфейса с помощью плавающей кнопки действия (FAB).
• Отображайте свой бренд, навигацию, поиск и другие действия с помощью панели приложения .
• Отображение и скрытие навигации вашего приложения с помощью выдвижной панели навигации .
• Для компоновки и навигации вашего приложения выберите один из множества других компонентов Material, таких как сворачивающиеся панели инструментов, вкладки, нижняя панель навигации и многое другое. Чтобы увидеть их все, перейдите в каталог компонентов Material для Android .

По возможности используйте предопределенные иконки Material Design. Например, для кнопки меню в боковой панели навигации используйте стандартную иконку «гамбургер». Список доступных иконок см. в разделе «Иконки Material Design» . Вы также можете импортировать иконки SVG из библиотеки иконок Material Design с помощью Vector Asset Studio в Android Studio.

Тени от высоты и карты

В дополнение к свойствам X и Y , представления в Android имеют свойство Z. Это свойство представляет собой высоту представления, которая определяет следующее:

• Размер тени: объекты с более высокими значениями Z отбрасывают более крупные тени.
• Порядок отрисовки: виды с более высокими значениями Z отображаются поверх других видов.

Рисунок 3. Значение Z , представляющее высоту.

Вы можете применить эффект возвышения к макету на основе карточек, что позволяет отображать важную информацию внутри карточек, придающих макету вид в стиле Material Design. Для создания карточек с эффектом возвышения по умолчанию можно использовать виджет CardView . Дополнительную информацию см. в разделе «Создание макета на основе карточек» .

Для получения информации о добавлении возвышения к другим видам см. раздел «Создание теней и обрезка видов» .

Анимации

Рисунок 4. Анимация тактильной обратной связи.

API для создания анимации позволяют создавать пользовательские анимации для обратной связи при касании элементов управления пользовательского интерфейса, изменения состояния представления и переходов между активностями.

Эти API позволяют вам:

• Реагируйте на события касания в ваших представлениях с помощью анимации обратной связи по касанию .
• Скрывайте и отображайте элементы с помощью круговой анимации раскрытия .
• Переключайтесь между задачами с помощью настраиваемых анимаций перехода между ними.
• Создавайте более естественные анимации с помощью изогнутого движения .
• Анимируйте изменения одного или нескольких свойств представления с помощью анимации изменения состояния представления .
• Отображение анимации в списке отображаемых объектов между изменениями состояния представления.

Анимация тактильной обратной связи встроена в ряд стандартных элементов интерфейса, таких как кнопки. API анимации позволяют настраивать эти анимации и добавлять их в пользовательские элементы интерфейса.

Для получения более подробной информации см. раздел «Введение в анимацию» .

Drawables

Попробуйте способ создания композиций.

Работа с графическими элементами в Compose