TopAppBar et icônes d’action
Ajoutez une barre de titre avec des actions.
TopAppBar et icônes d’action est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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. ✨
Questions Fréquemment Posées
La leçon « TopAppBar et icônes d’action » est-elle gratuite ?
Oui — le texte complet de « TopAppBar et icônes d’action » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « TopAppBar et icônes d’action » ?
Ajoutez une barre de titre avec des actions. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « TopAppBar et icônes d’action » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Scaffold : le squelette de l’écran
- TopAppBar et icônes d’action
- Barres inférieures et boutons d’action flottants
- Snackbars et SnackbarHostState