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 usar o elemento 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." ) } }
Pontos principais sobre o código
- Uma
Scaffold
externa que tem umbottomBar
definido. - Uma implementação
bottomBar
que contém uma lista de ações. - Ações que são implementações de
IconButton
que contêmIcon
para texto de descrição de imagem e conteúdo, cada uma com um lambdaonClick
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. Elas 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](https://developer.android.google.cn/static/quick-guides/content/bottom-app-bar.png?hl=pt-br)
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:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=pt-br)
Criar um scaffold da tela inicial
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=pt-br)