Плавающая кнопка действия (FAB) — это кнопка с высоким выделением, которая позволяет пользователю выполнить основное действие в приложении. Он продвигает одно целенаправленное действие, которое является наиболее распространенным путем, который может предпринять пользователь, и обычно находится в правом нижнем углу экрана.
Рассмотрим эти три варианта использования FAB:
- Создать новый элемент : в приложении для создания заметок FAB можно использовать для быстрого создания новой заметки.
- Добавить новый контакт . В приложении чата FAB может открыть интерфейс, позволяющий пользователю добавлять кого-либо в разговор.
- Расположение по центру : в интерфейсе карты FAB может центрировать карту по текущему местоположению пользователя.
В Material Design существует четыре типа FAB:
- FAB : плавающая кнопка обычного размера.
- Small FAB : маленькая плавающая кнопка действия.
- Большая FAB : большая плавающая кнопка действия.
- Расширенный FAB : плавающая кнопка действия, которая содержит больше, чем просто значок.
Совместимость версий
Для этой реализации требуется, чтобы для minSDK вашего проекта был установлен уровень API 21 или выше.
Зависимости
Котлин
implementation(platform("androidx.compose:compose-bom:2025.01.01"))
классный
implementation platform('androidx.compose:compose-bom:2025.01.01')
Создайте базовую плавающую кнопку действия
Чтобы создать общую кнопку с плавающим действием, используйте базовый составной элемент FloatingActionButton
:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Результат

Создайте небольшую плавающую кнопку действия
Чтобы создать небольшую плавающую кнопку действия, используйте составной объект SmallFloatingActionButton
. В следующем примере показано, как это сделать с добавлением пользовательских цветов.
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
Результат

Создайте большую плавающую кнопку действия
Чтобы создать большую плавающую кнопку действия, используйте составной объект LargeFloatingActionButton
. Этот составной объект существенно не отличается от других примеров, за исключением того факта, что в результате получается кнопка большего размера.
Ниже приведена простая реализация большого FAB.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
Результат

Создайте расширенную плавающую кнопку действия
Вы можете создавать более сложные плавающие кнопки действий с помощью составного элемента ExtendedFloatingActionButton
. Ключевое различие между ним и FloatingActionButton
заключается в том, что у него есть специальные параметры icon
и text
. Они позволяют создать кнопку с более сложным содержимым, которая масштабируется в соответствии с ее содержимым.
В следующем фрагменте кода показано, как реализовать ExtendedFloatingActionButton
, с примерами значений, передаваемых для icon
и text
.
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
Результат

Ключевые моменты
Хотя существует несколько составных элементов, которые вы можете использовать для создания плавающих кнопок действий в соответствии с Material Design, их параметры не сильно отличаются. Среди ключевых параметров, на которые следует обратить внимание, можно выделить следующие:
-
onClick
: функция, вызываемая, когда пользователь нажимает кнопку. -
containerColor
: цвет кнопки. -
contentColor
: цвет значка.
z## Коллекции, содержащие это руководство
Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:
