Botão de ação flutuante

Um botão de ação flutuante (FAB) é um botão de alta ênfase que permite ao usuário executar uma ação primária em um aplicativo. Promove uma ação única e focada esse é 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 é possível usar um FAB:

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

No Material Design, há 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.
• Botão de ação flutuante 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 uma ação flutuante consistentes com o Material Design, os parâmetros não são muito diferentes. Entre os principais parâmetros que você deve ter em mente, 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 elemento combinável básico FloatingActionButton. O exemplo a seguir demonstra 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:

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

Botão 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 adicionando 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 deste exemplo para personalizar cores com outros elementos combináveis.

Essa implementação aparece da seguinte maneira:

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 é muito diferente dos outros exemplos, exceto pelo fato de resulta em um botão maior.

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

Observação: este exemplo transmite CircleShape como o valor para o parâmetro shape. resultando em um botão redondo, em vez de um quadrado com bordas arredondadas. Você pode transmita qualquer instância de Shape ou defina o valor de MaterialTheme.shape.large como 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 maneira:

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

Botão estendido

É possível criar botões de ação flutuantes mais complexos com o Elemento combinável ExtendedFloatingActionButton. A principal diferença entre eles e FloatingActionButton é que ele tem icon e text dedicados parâmetros. Permitem que você crie um botão com conteúdo mais complexo e adaptável para ajustar o 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:

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

Outros recursos

• Botões comuns
• Documentos sobre a interface do Material Design (link em inglês)