Создайте плавающую кнопку действия (FAB)

Плавающая кнопка действия (FAB) — это кнопка с акцентом на действие, позволяющая пользователю выполнить основное действие в приложении. Она активирует одно конкретное действие, которое является наиболее распространённым вариантом действий пользователя, и обычно располагается в правом нижнем углу экрана.

Рассмотрим три варианта использования FAB:

  • Создать новый элемент : в приложении для создания заметок FAB может использоваться для быстрого создания новой заметки.
  • Добавить новый контакт : в приложении чата FAB может открыть интерфейс, позволяющий пользователю добавить кого-то в беседу.
  • Центрировать местоположение : в интерфейсе карты FAB может центрировать карту относительно текущего местоположения пользователя.

В Material Design существует четыре типа FAB:

  • FAB : Плавающая кнопка действия обычного размера.
  • Маленькая FAB : небольшая плавающая кнопка действия.
  • Большая FAB : большая плавающая кнопка действия.
  • Расширенная FAB : плавающая кнопка действия, которая содержит больше, чем просто значок.

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

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

Зависимости

Котлин 

  implementation(platform("androidx.compose:compose-bom:2025.05.00"))

Круто 

  implementation platform('androidx.compose:compose-bom:2025.05.00')

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

Чтобы создать общую плавающую кнопку действия, используйте базовый компонуемый объект FloatingActionButton : 

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

Результат

Стандартная плавающая кнопка действия с закругленным углом, тенью и значком «добавить».
Рисунок 1. Плавающая кнопка действия.

Создайте небольшую плавающую кнопку действия

Чтобы создать небольшую плавающую кнопку действия, используйте компонуемый элемент 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.")
    }
}
FloatingActionButton.kt

Результат

Реализация SmallFloatingActionButton, содержащая значок «добавить».
Рисунок 2. Небольшая плавающая кнопка действия.

Создайте большую плавающую кнопку действия

Чтобы создать большую плавающую кнопку действия, используйте компонуемый элемент LargeFloatingActionButton . Этот компонуемый элемент ничем существенно не отличается от других примеров, за исключением того, что он создаёт кнопку большего размера.

Ниже представлена простая реализация большого FAB.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

Результат

Реализация LargeFloatingActionButton, содержащая значок «добавить».
Рисунок 3. Большая плавающая кнопка действия.

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

С помощью компонуемого объекта 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") },
    )
}
FloatingActionButton.kt

Результат

Реализация ExtendedFloatingActionButton, которая отображает текст «расширенная кнопка» и значок редактирования.
Рисунок 4. Плавающая кнопка действия с текстом и значком.

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

Хотя существует несколько компонуемых элементов, которые можно использовать для создания плавающих кнопок действий в соответствии с Material Design, их параметры не сильно отличаются. Среди ключевых параметров, которые следует учитывать, следующие:

  • onClick : Функция вызывается, когда пользователь нажимает кнопку.
  • containerColor : Цвет кнопки.
  • contentColor : Цвет значка.

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

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

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

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

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