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

Um botão de ação flutuante (FAB, na sigla em inglês) é 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 na parte inferior direita 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.
• Centralizar local: em uma interface de mapa, um FAB pode centralizar o mapa no local atual do usuário.

No Material Design, há quatro tipos de FABs:

• FAB: um botão de ação flutuante de tamanho normal.
• FAB pequeno: um botão de ação flutuante menor.
• FAB grande: um botão de ação flutuante maior.
• FAB estendido: um botão de ação flutuante que contém mais do que apenas um ícone.

Compatibilidade de versões

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

Dependências

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

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

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.")
    }
}
FloatingActionButton.kt

Resultado

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

Para criar um pequeno botão de ação flutuante, 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.")
    }
}
FloatingActionButton.kt

Resultado

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 que ele resulta em um botão maior.

Confira a seguir uma implementação direta de um FAB grande.

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

Resultado

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

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

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") },
    )
}
FloatingActionButton.kt

Resultado

Pontos principais

Embora haja vários elementos combináveis que você pode usar para criar botões de ação flutuantes consistentes com o Material Design, os parâmetros deles não são muito diferentes. Entre os principais parâmetros que você precisa ter em mente estão:

• 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 das coleções de guias rápidos selecionados que abrangem objetivos mais amplos de desenvolvimento para Android:

Mostrar componentes interativos

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

Coleção de guias rápidos

Tem dúvidas ou quer dar feedback?

Acesse nossa página de perguntas frequentes e confira guias rápidos ou entre em contato para compartilhar sua opinião.

Acessar as perguntas frequentes Enviar feedback