Mostrar uma barra de apps na parte de baixo

Crie uma barra de app inferior para ajudar os usuários a navegar e acessar funções no app. Siga estas orientações para adicionar uma barra de app inferior ao seu app usando o combinável BottomAppBar.

Compatibilidade de versões

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

Dependências

Criar uma barra de apps na parte de baixo

Use o código abaixo para criar uma barra de apps na parte de baixo com quatro botões de ícone e um botão de ação flutuante:

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

Pontos principais sobre o código

  • Uma Scaffold externa que tem um bottomBar definido.
  • Uma implementação bottomBar que contém uma lista de ações.
  • Ações que são implementações de IconButton que contêm Icon para texto de descrição de imagem e conteúdo, cada uma com um lambda onClick para realizar essas ações.

É possível transmitir elementos combináveis para os seguintes parâmetros principais:

  • actions: uma série de ícones que aparecem no lado esquerdo da barra. Geralmente, são ações principais da tela em questão ou itens de navegação.
  • floatingActionButton: o botão de ação flutuante que aparece no lado direito da barra.

Resultados

Exemplo de uma barra de apps inferior
Figura 1. Exemplo de uma barra de apps inferior.

Coleções que contêm este guia

Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:

Descubra como usar uma plataforma padronizada para criar interfaces do usuário complexas. O esqueleto reúne diferentes partes da interface, dando aos apps uma aparência coerente.
Coleção de guias rápidos
Aprenda como as funções combináveis podem permitir que você crie componentes de interface bonitos com base no sistema de design do Material Design.
Coleção de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback