Criar um botão de ação flutuante (FAB)

Um botão de ação flutuante (FAB) é um botão de alta ênfase que permite ao usuário realizar uma ação principal em um aplicativo. Ele promove uma ação única e focada que é o caminho mais comum que um usuário pode seguir e geralmente é encontrado fixado no canto inferior direito da tela.

Considere estes três casos de uso em que você pode usar um FAB:

  • Criar novo item: em um app de anotações, um FAB pode ser usado para criar rapidamente uma nova nota.
  • Adicionar novo contato: em um app de chat, um FAB pode abrir uma interface que permite ao usuário adicionar alguém a uma conversa.
  • Localização central: em uma interface de mapa, um FAB pode centralizar o mapa no local atual do usuário.

No Material Design, há quatro tipos de FAB:

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou mais recente.

Dependências

Kotlin

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

Groovy

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

Criar um botão de ação flutuante básico

Para criar um botão de ação flutuante geral, use o elemento combinável básico FloatingActionButton:

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

Resultado

Um botão de ação flutuante padrão com cantos arredondados, uma sombra e um ícone de "adicionar".
Figura 1. Um botão de ação flutuante.

Criar um botão de ação flutuante pequeno

Para criar um botão de ação flutuante pequeno, use o elemento combinável SmallFloatingActionButton. O exemplo a seguir demonstra como fazer isso, com a adição de cores personalizadas.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}

Resultado

Uma implementação de SmallFloatingActionButton que contém um ícone de "adicionar".
Figura 2. Um pequeno botão de ação flutuante.

Criar um botão de ação flutuante grande

Para criar um botão de ação flutuante grande, use o elemento combinável LargeFloatingActionButton. Esse elemento combinável não é significativamente diferente dos outros exemplos, exceto pelo fato de resultar em um botão maior.

Confira a seguir uma implementação simples de um grande botão de ação flutuante.

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

Resultado

Uma implementação de LargeFloatingActionButton que contém um ícone de "adicionar".
Figura 3. Um botão de ação flutuante grande.

Criar um botão de ação flutuante estendido

É possível criar botões de ação flutuantes mais complexos com o elemento combinável ExtendedFloatingActionButton. A principal diferença entre ele e FloatingActionButton é que ele tem parâmetros icon e text dedicados. Elas permitem que você crie um botão com conteúdo mais complexo que é dimensionado para se ajustar adequadamente.

O snippet a seguir demonstra como implementar ExtendedFloatingActionButton, com valores de exemplo transmitidos para icon e text.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}

Resultado

Uma implementação de ExtendedFloatingActionButton que mostra o texto "botão estendido" e um ícone de edição.
Figura 4. Um botão de ação flutuante com texto e um ícone.

Pontos principais

Embora existam vários elementos combináveis que podem ser usados para criar botões de ação flutuantes consistentes com o Material Design, os parâmetros deles não são muito diferentes. Estes são os principais parâmetros que você precisa considerar:

  • onClick: a função chamada quando o usuário pressiona o botão.
  • containerColor: a cor do botão.
  • contentColor: a cor do ícone.

z## Coleções que contêm este guia

Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:

Aprenda como as funções combináveis podem permitir que você crie componentes de interface bonitos com base no sistema de design do Material Design.

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.