Benachrichtigung mit einer Snackbar erstellen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die Snackbar-Komponente dient als kurze Benachrichtigung, die unten auf dem Bildschirm angezeigt wird. Sie geben Feedback zu einer Aktion, ohne die Nutzererfahrung zu unterbrechen. Infofelder verschwinden nach einigen Sekunden. Der Nutzer kann sie auch durch eine Aktion schließen, z. B. durch Tippen auf eine Schaltfläche.
Hier sind drei Anwendungsfälle, in denen Sie eine Snackbar verwenden könnten:
- Aktion bestätigen:Nachdem ein Nutzer eine E-Mail oder Nachricht gelöscht hat, wird eine Snackbar angezeigt, in der die Aktion bestätigt und die Option „Rückgängig“ angeboten wird.
- Netzwerkstatus:Wenn die Internetverbindung der App unterbrochen wird, wird in einer Snackbar angezeigt, dass sie jetzt offline ist.
- Datenübermittlung:Wenn Sie ein Formular gesendet oder die Einstellungen aktualisiert haben, wird in einer Snackbar angezeigt, dass die Änderung gespeichert wurde.
Versionskompatibilität
Für diese Implementierung muss die minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.
Abhängigkeiten
Einfache Infoleiste erstellen
Wenn Sie eine Snackbar implementieren möchten, erstellen Sie zuerst SnackbarHost mit der Property SnackbarHostState. SnackbarHostState bietet Zugriff auf die Funktion showSnackbar(), mit der Sie die Snackbar anzeigen können.
Für diese Funktion ist ein CoroutineScope erforderlich, z. B. rememberCoroutineScope. Sie kann als Reaktion auf UI-Ereignisse aufgerufen werden, um in Scaffold ein Snackbar anzuzeigen.
Infobanner mit Aktion erstellen
Sie können eine optionale Aktion angeben und die Dauer der Snackbar anpassen.
Die Funktion snackbarHostState.showSnackbar() akzeptiert zusätzliche actionLabel- und duration-Parameter und gibt eine SnackbarResult zurück.
Mit dem Parameter snackbarHost können Sie eine benutzerdefinierte Snackbar angeben. Weitere Informationen finden Sie in den SnackbarHost API-Referenzdokumenten.
Ergebnisse
Abbildung 1. Snackbar-Benachrichtigungen mit Aktion
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
Interaktive Komponenten anzeigen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-02-06 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-02-06 (UTC)."],[],[],null,["# Create a notification with a snackbar\n\n\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---------------------\n\nThis implementation requires that your project minSDK be set to API level 21\nor higher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a basic snackbar\n-----------------------\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\n\u003cbr /\u003e\n\n```kotlin\nval scope = rememberCoroutineScope()\nval snackbarHostState = remember { SnackbarHostState() }\nScaffold(\n snackbarHost = {\n SnackbarHost(hostState = snackbarHostState)\n },\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show snackbar\") },\n icon = { Icon(Icons.Filled.Image, contentDescription = \"\") },\n onClick = {\n scope.launch {\n snackbarHostState.showSnackbar(\"Snackbar\")\n }\n }\n )\n }\n) { contentPadding -\u003e\n // Screen content\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L218-L240\n \n```\n\n\u003cbr /\u003e\n\nCreate a snackbar with action\n-----------------------------\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\n\u003cbr /\u003e\n\n```kotlin\nval scope = rememberCoroutineScope()\nval snackbarHostState = remember { SnackbarHostState() }\nScaffold(\n snackbarHost = {\n SnackbarHost(hostState = snackbarHostState)\n },\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show snackbar\") },\n icon = { Icon(Icons.Filled.Image, contentDescription = \"\") },\n onClick = {\n scope.launch {\n val result = snackbarHostState\n .showSnackbar(\n message = \"Snackbar\",\n actionLabel = \"Action\",\n // Defaults to SnackbarDuration.Short\n duration = SnackbarDuration.Indefinite\n )\n when (result) {\n SnackbarResult.ActionPerformed -\u003e {\n /* Handle snackbar action performed */\n }\n SnackbarResult.Dismissed -\u003e {\n /* Handle snackbar dismissed */\n }\n }\n }\n }\n )\n }\n) { contentPadding -\u003e\n // Screen content\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L247-L283\n \n```\n\n\u003cbr /\u003e\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\n**Figure 1.** Snackbar notifications with action.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\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\n--------------------------\n\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)"]]
