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 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 um novo item: em um app de anotações, um FAB pode ser usado para criar rapidamente uma nova nota.
• Adicionar um 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 a localização: em uma interface de mapa, um FAB pode centralizar o mapa na localização atual do usuário.

No Material Design, há quatro tipos de FAB:

• 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.

Superfície da API

Embora haja 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 principais parâmetros que você precisa considerar estão os seguintes:

• 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 básico FloatingActionButton combinável. O exemplo a seguir 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 maneira:

Botão pequeno

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

Essa implementação aparece da seguinte maneira:

Botão grande

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

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

@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 maneira:

Botão estendido

Você pode criar botões de ação flutuantes mais complexos com o ExtendedFloatingActionButton elemento combinável. A principal diferença entre ele e FloatingActionButton é que ele tem parâmetros icon e text dedicados. 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

Essa implementação aparece da seguinte maneira:

Outros recursos

• Botões comuns
• Documentos da interface do Material