스낵바로 알림 만들기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
스낵바 구성요소는 화면 하단에 표시되는 간단한 알림 역할을 합니다. 사용자 환경을 중단하지 않고 작업이나 작업에 관한 피드백을 제공합니다. 스낵바는 몇 초 후 사라집니다. 사용자는 버튼을 탭하는 등의 작업으로 닫을 수도 있습니다.
스낵바를 사용할 수 있는 세 가지 사용 사례를 고려해 보세요.
- 작업 확인: 사용자가 이메일 또는 메시지를 삭제하면 작업을 확인하고 '실행취소' 옵션을 제공하는 스낵바가 표시됩니다.
- 네트워크 상태: 앱의 인터넷 연결이 끊어지면 스낵바가 표시되어 현재 오프라인 상태임을 나타냅니다.
- 데이터 제출: 양식을 제출하거나 설정을 업데이트하면 변경사항이 저장되었다는 알림이 스낵바에 표시됩니다.
버전 호환성
이 구현을 사용하려면 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.
종속 항목
기본 스낵바 만들기
스낵바를 구현하려면 먼저 SnackbarHostState 속성이 포함된 SnackbarHost를 만듭니다. SnackbarHostState를 통해 스낵바를 표시하는 데 사용할 수 있는 showSnackbar() 함수에 액세스할 수 있습니다.
이 정지 함수는 CoroutineScope가 필요하고(예: rememberCoroutineScope 사용) UI 이벤트에 대한 응답으로 호출되어 Scaffold 내의 Snackbar를 표시할 수 있습니다.
작업이 포함된 스낵바 만들기
선택적 작업을 제공하고 Snackbar의 지속 시간을 조정할 수 있습니다.
snackbarHostState.showSnackbar() 함수는 추가 actionLabel 및 duration 매개변수를 허용하고 SnackbarResult를 반환합니다.
snackbarHost 매개변수를 사용하여 맞춤 Snackbar를 제공할 수 있습니다. 자세한 내용은 SnackbarHost API 참조 문서를 참고하세요.
결과
그림 1. 작업이 포함된 스낵바 알림
이 가이드가 포함된 컬렉션
이 가이드는 더 광범위한 Android 개발 목표를 다루는 선별된 빠른 가이드 모음의 일부입니다.
대화형 구성요소 표시
구성 가능한 함수를 사용하여 Material Design 디자인 시스템을 기반으로 멋진 UI 구성요소를 쉽게 만드는 방법을 알아보세요.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-02-06(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 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)"]]
