Создать кнопку

Кнопки позволяют пользователю запускать определенное действие. Существует пять типов кнопок:

Тип

Появление

Цель

Заполненный

Однотонный фон с контрастным текстом.

Для основных действий, таких как «Отправить» и «Сохранить», эффект тени подчеркивает важность кнопки.

Тональный

Цвет фона меняется в зависимости от поверхности.

Для основных или важных действий. Заполненные кнопки обеспечивают визуальный вес и подходят для таких действий, как «Добавить в корзину» и «Войти».

Возвышенный

Тень делает его заметным.

Для основных или важных действий. Увеличьте высоту кнопки, чтобы она была более заметна.

Изложено

Имеет рамку без заливки.

Для важных, но не первостепенных действий. Кнопки с контуром хорошо сочетаются с другими кнопками, указывая на альтернативные, второстепенные действия, такие как «Отмена» или «Назад».

Текст

Текст без фона и рамки.

Для менее важных действий, таких как навигационные ссылки, или второстепенных действий, таких как «Узнать больше» или «Просмотреть подробности».

Совместимость версий

Для данной реализации требуется, чтобы в вашем проекте был установлен уровень API 21 или выше.

Зависимости

Создайте заполненную кнопку.

Компонент «Заполненная кнопка» использует базовый компонент Button . По умолчанию он заполнен сплошным цветом.

Результаты

Заполненная кнопка с фиолетовым фоном и надписью «заполнено».
Рисунок 1. Заполненная кнопка.

Создайте кнопку с заполненным тоном.

Компонент кнопки с тональным заполнением использует составной объект FilledTonalButton . По умолчанию он заполнен тональным цветом.

Результаты

Кнопка с тональным рисунком и светло-фиолетовым фоном, на которой написано «заполнено».
Рисунок 2. Тональная кнопка.

Создайте кнопку с контуром.

Компонент кнопки с контуром использует составной объект OutlinedButton . По умолчанию он отображается с контуром.

Результаты

Прозрачная кнопка с контуром и темной рамкой, на которой написано «Outlined» (Контурная).
Рисунок 3. Кнопка с контуром.

Создайте кнопку с возвышением.

Компонент «Приподнятая кнопка» использует составной объект ElevatedButton . По умолчанию он имеет тень, которая имитирует эффект возвышения, и выглядит как обведенная кнопка с тенью.

Результаты

Приподнятая кнопка на сером фоне с надписью «Elevated» (Приподнятая).
Рисунок 4. Приподнятая кнопка.

Создайте текстовую кнопку.

Компонент текстовой кнопки использует составной объект TextButton . До момента нажатия он отображается только как текст. По умолчанию у него нет сплошной заливки или контура.

Результаты

Текстовая кнопка с надписью «Текстовая кнопка».
Рисунок 5. Текстовая кнопка.

Ключевые моменты

  • onClick : Функция, вызываемая при нажатии пользователем кнопки.
  • enabled : Если значение параметра равно false, кнопка будет отображаться как недоступная и неактивная.
  • colors : Экземпляр класса ButtonColors , определяющий цвета, используемые в кнопке.
  • contentPadding : Отступы внутри кнопки.

Коллекции, содержащие это руководство

Данное руководство является частью подборки кратких руководств, охватывающих более широкие цели разработки под Android:

Узнайте, как компонуемые функции позволяют легко создавать красивые компоненты пользовательского интерфейса на основе системы дизайна Material Design.
Краткий справочник

Есть вопросы или отзывы?

Перейдите на страницу часто задаваемых вопросов и ознакомьтесь с краткими руководствами или свяжитесь с нами и поделитесь своими мыслями.
Перейти к разделу часто задаваемых вопросов Оставить отзыв