Créer une notification avec une barre de notification
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le composant snackbar sert de notification brève qui s'affiche en bas de l'écran. Il fournit des commentaires sur une opération ou une action sans interrompre l'expérience utilisateur. Les barres de notification disparaissent au bout de quelques secondes. L'utilisateur peut également les ignorer en effectuant une action, comme appuyer sur un bouton.
Voici trois cas d'utilisation dans lesquels vous pouvez utiliser une barre de notification:
- Confirmation d'action:lorsqu'un utilisateur supprime un e-mail ou un message, une barre de notification s'affiche pour confirmer l'action et proposer une option "Annuler".
- État du réseau:lorsque l'application perd sa connexion Internet, une barre de notification s'affiche pour indiquer qu'elle est désormais hors connexion.
- Envoi de données:lorsqu'un formulaire est envoyé ou que des paramètres sont mis à jour, une barre de notification indique que le changement a bien été enregistré.
Compatibilité des versions
Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou version ultérieure.
Dépendances
Créer une barre de notification de base
Pour implémenter une barre de notification, vous devez d'abord créer SnackbarHost, qui inclut une propriété SnackbarHostState. SnackbarHostState fournit un accès à la fonction showSnackbar() que vous pouvez utiliser pour afficher votre barre de notification.
Cette fonction de suspension nécessite de définir sa CoroutineScope (par exemple, via rememberCoroutineScope) et peut être appelée en réponse à des événements d'interface utilisateur pour afficher une Snackbar dans le Scaffold.
Créer une barre d'action
Vous pouvez ajouter une action facultative et ajuster la durée de Snackbar.
La fonction snackbarHostState.showSnackbar() accepte des paramètres actionLabel et duration supplémentaires et renvoie un SnackbarResult.
Vous pouvez fournir une Snackbar personnalisée avec le paramètre snackbarHost. Pour en savoir plus, consultez la documentation de référence de l'API SnackbarHost.
Résultats
Figure 1 Notifications Snackbar avec action.
Collections contenant ce guide
Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:
Afficher des composants interactifs
Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/02/06 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/02/06 (UTC)."],[],[],null,["\u003cbr /\u003e\n\nThe [snackbar component](https://material.io/components/snackbars) serves as a brief notification that appears at the\nbottom of the screen. It provides feedback about an operation or action without\ninterrupting the user experience. Snackbars disappear after a few seconds. The\nuser can also dismiss them with an action, such as tapping a button.\n\nConsider these three use cases where you might use a snackbar:\n\n- **Action confirmation:** After a user deletes an email or message, a snackbar appears to confirm the action and offer an \"Undo\" option.\n- **Network status:** When the app loses its internet connection, a snackbar pops up to note that it is now offline.\n- **Data submission:** Upon successfully submitting a form or updating settings, a snackbar notes that the change has saved successfully.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21\nor higher.\n\nDependencies\n\nCreate a basic snackbar\n\nTo implement a snackbar, you first create [`SnackbarHost`](/reference/kotlin/androidx/compose/material3/package-summary#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)), which includes a\n[`SnackbarHostState`](/reference/kotlin/androidx/compose/material3/SnackbarHostState) property. `SnackbarHostState` provides access to the\n[`showSnackbar()`](/reference/kotlin/androidx/compose/material3/SnackbarHostState#showsnackbar) function which you can use to display your snackbar.\n\nThis suspending function requires a `CoroutineScope` such as with using\n[`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope) --- and can be called in response to UI events to\nshow a [`Snackbar`](/reference/kotlin/androidx/compose/material3/package-summary#snackbar) within `Scaffold`.\n\nCreate a snackbar with action\n\nYou can provide an optional action and adjust the duration of the `Snackbar`.\nThe `snackbarHostState.showSnackbar()` function accepts additional `actionLabel`\nand `duration` parameters, and returns a [`SnackbarResult`](/reference/kotlin/androidx/compose/material3/SnackbarResult).\n\nYou can provide a custom `Snackbar` with the `snackbarHost` parameter. See the\n[`SnackbarHost` API reference docs](/reference/kotlin/androidx/compose/material/package-summary#snackbarhost) for more information.\n\nResults\n\n\n**Figure 1.** Snackbar notifications with action.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
