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

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

Тип

Появление

Цель

Заполненный

Сплошной фон с контрастным текстом.

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

Тональный

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

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

Повышенный

Тень выделяет его.

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

Изложил

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

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

Текст

Текст без фона и границы.

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

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

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

Зависимости

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

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

Результаты

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

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

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

Результаты

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

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

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

Результаты

Кнопка с прозрачным контуром и темной рамкой с надписью «Контур».
Рисунок 3. Обведенная кнопка.

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

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

Результаты

Кнопка с повышенным уровнем на сером фоне с надписью «Повышенный».
Рисунок 4. Приподнятая кнопка.

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

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

Результаты

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

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

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

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

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

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

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

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