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

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

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

Android предоставляет следующие функции, которые помогут вам создавать приложения Material Design:

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

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

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

Рисунок 1. Тема Dark Material.
Рисунок 2. Тема Light Material.

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

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

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

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

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

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

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

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

Информацию о добавлении высоты к другим видам см. в разделе Создание теней и обрезанных видов .

Анимации

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

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

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

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

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

Дополнительные сведения см. в разделе «Введение в анимацию» .

Рисованные

Эти возможности для рисунков помогут вам реализовать приложения Material Design:

  • Векторные рисунки масштабируются без потери четкости и идеально подходят для одноцветных значков в приложениях. Узнайте больше о векторных рисунках .
  • Рисуемая тонировка позволяет определять растровые изображения как альфа-маску и окрашивать их цветом во время выполнения. Узнайте, как добавить оттенок к рисункам .
  • Извлечение цвета позволяет автоматически извлекать яркие цвета из растрового изображения. Узнайте, как выбирать цвета с помощью Palette API .
,
Попробуйте способ создания
Jetpack Compose — рекомендуемый набор инструментов пользовательского интерфейса для Android. Узнайте, как работать с темами в Compose.

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

Android предоставляет следующие функции, которые помогут вам создавать приложения Material Design:

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

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

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

Рисунок 1. Тема Dark Material.
Рисунок 2. Тема Light Material.

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

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

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

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

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

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

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

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

Информацию о добавлении высоты к другим видам см. в разделе Создание теней и обрезанных видов .

Анимации

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

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

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

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

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

Дополнительные сведения см. в разделе «Введение в анимацию» .

Рисованные

Эти возможности для рисунков помогут вам реализовать приложения Material Design:

  • Векторные рисунки масштабируются без потери четкости и идеально подходят для одноцветных значков в приложениях. Узнайте больше о векторных рисунках .
  • Рисуемая тонировка позволяет определять растровые изображения как альфа-маску и окрашивать их цветом во время выполнения. Узнайте, как добавить оттенок к рисункам .
  • Извлечение цвета позволяет автоматически извлекать яркие цвета из растрового изображения. Узнайте, как выбирать цвета с помощью Palette API .