Botão de ação flutuante

Um botão de ação flutuante (FAB, na sigla em inglês) é um botão de alta ênfase que permite que o usuário realize 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 normalmente fica ancorado 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 anotação.
• Adicionar novo contato: em um app de chat, um FAB pode abrir uma interface que permite que o usuário adicione alguém a uma conversa.
• Centralizar: em uma interface do mapa, um FAB pode centralizar o mapa na localização atual do usuário.

No Material Design, existem quatro tipos de FAB:

• FAB: um botão de ação flutuante de tamanho comum.
• 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.

Figura 1. Os quatro tipos de botão de ação flutuante.

Plataforma da API

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. Entre os parâmetros-chave que você deve 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.

Botão de ação flutuante

Para criar um botão de ação flutuante geral, use o elemento elemento combinável FloatingActionButton básico. O exemplo abaixo demonstra uma implementação básica de um FAB:

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

Essa implementação aparece da seguinte forma:

Figura 2. Um botão de ação flutuante.

Botão pequeno

Para criar um botão de ação flutuante pequeno, use o elemento combinável SmallFloatingActionButton. O exemplo abaixo 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

Observação: como os vários elementos combináveis do FAB compartilham muitos parâmetros, é possível usar a abordagem neste exemplo para personalizar cores com outros elementos combináveis.

Essa implementação aparece da seguinte forma:

Figura 3. Um pequeno botão de ação flutuante.

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

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

Observação: este exemplo transmite CircleShape como o valor do parâmetro shape, resultando em um botão redondo em vez de um quadrado com bordas arredondadas. É possível transmitir qualquer instância de Shape ou definir o valor de MaterialTheme.shape.large para ajustá-lo em todo o app.

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

Essa implementação aparece da seguinte forma:

Figura 4. Um grande botão de ação flutuante.

Botão estendido

Você pode criar botões de ação flutuantes mais complexos com o elemento ExtendedFloatingActionButton combinável. 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.

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

Essa implementação aparece da seguinte forma:

Figura 5. Um botão de ação flutuante com texto e um ícone.

Outros recursos

• Botões comuns
• Documentação da interface do Material Design (em inglês)