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.
  • 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.
Um exemplo de cada um dos quatro componentes do botão de ação flutuante.
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 método Elemento combinável 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:

Um botão de ação flutuante padrão com canto arredondado, uma sombra e um botão "adicionar" ícone.
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

Essa implementação aparece da seguinte maneira:

Uma implementação de SmallfloatActionButton que contém um elemento 'add' ícone.
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 método 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 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

Essa implementação aparece da seguinte maneira:

Uma implementação de LargefloatActionButton que contém um elemento 'add' ícone.
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. Eles permitem que você crie um botão com conteúdo mais complexo e que pode ser dimensionado 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:

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

Outros recursos