TopAppBar e Ícones de Ação
Adicione uma barra de título com ações.
TopAppBar e Ícones de Ação é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
The Title Bar
The strip across the top with your screen name and actions is the TopAppBar. It gives users a stable anchor that says where they are. 🧭
A Minimal TopAppBar
At its simplest, a TopAppBar just needs a title. Drop it into the Scaffold topBar slot and you have a real Material header.
TopAppBar(
title = { Text("Inbox") }
)Title Is a Composable
Notice the title takes a Composable lambda, not a String. That means you can put any content there, though usually a single Text fits best.
The navigationIcon Slot
The leading navigationIcon slot holds your back or menu button. Wrap an Icon in an IconButton so it is tappable and sized correctly.
navigationIcon = {
IconButton(onClick = { }) {
Icon(Icons.Default.Menu, "Menu")
}
}The actions Slot
Trailing buttons go in the actions slot. It is a RowScope, so each IconButton you add lines up neatly on the right edge.
actions = {
IconButton(onClick = { }) {
Icon(Icons.Default.Search, "Search")
}
}Always Pass contentDescription
Every Icon in a bar needs a contentDescription. Screen readers announce it, so a Search icon should say Search, not stay silent.
Bar Variants
Material 3 offers CenterAlignedTopAppBar, MediumTopAppBar, and LargeTopAppBar. They differ only in title size and alignment, so pick by feel.
Coloring the Bar
Use TopAppBarDefaults.topAppBarColors to recolor the container and title. Lean on theme colors so the bar stays consistent in light and dark.
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primary
)Collapsing Bars
Pass a scrollBehavior and connect it to your content's nested scroll to make large bars shrink as the user scrolls down.
Do Not Overcrowd
Keep actions to two or three icons. Move the rest behind an overflow menu so the bar stays readable on small phones.
Wire It to Scaffold
The bar lives in Scaffold's topBar slot, so the content area shrinks automatically and your screen body never hides behind it.
Scaffold(topBar = { TopAppBar(title = { Text("Home") }) }) { p -> }Quick Check
You add a search IconButton to a TopAppBar. Where does it belong?
Recap
A TopAppBar holds a title, a leading navigationIcon, and trailing actions. Describe every icon, keep it tidy, and place it in the topBar slot. ✨
Perguntas Frequentes
A aula “TopAppBar e Ícones de Ação” é grátis?
Sim — o texto completo de “TopAppBar e Ícones de Ação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.
O que vou aprender em “TopAppBar e Ícones de Ação”?
Adicione uma barra de título com ações. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Jetpack Compose Academy?
Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “TopAppBar e Ícones de Ação”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Jetpack Compose Academy?
Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Scaffold: A Estrutura da Tela
- TopAppBar e Ícones de Ação
- Barras Inferiores e Botões de Ação Flutuantes
- Snackbars e SnackbarHostState