« Show Snackbar in Android in Jetpack Compose

What are Snackbars?

Snackbars are UI components providing lightweight feedback about something in the app. Basically, just a brief message informing users of some action that the app has performed or will perform.

They appear temporarily and disappear automatically after a timeout or user interaction. A snackbar can contain a single action that is accessible by a text button. Usually something like “try again” or “undo”. And they shouldn’t interrupt the user experience

First, lets quickly introduce us to a Scaffold.

A Scaffold is a layout that implements the basic material design layout structure. You can add things like a TopBar, BottomBar, Floating Action Button (FAB), or a Drawer.

The scaffold makes sure everything is displayed together in the right place according to the material design guidelines.

Copy
1@Composable
2fun SnackbarDemo() {
3Scaffold() {
4        Button(onClick = {})
5        {
6            Text(text = "Click me!")
7        }
8    }
9}

The Code

Let’s start with a composable containing Scaffold and one button. The snackbar should appear when the user presses the button.

Copy
1@Composable
2fun SnackbarDemo1() {
3Scaffold() {
4        Button(onClick = {})
5        {
6            Text(text = "Click me!")
7        }
8    }
9}

Let’s create a default ScaffoldState inside “remember” method to ensure that we use the same state even after re-composition. As I mentioned earlier, the ScaffoldState contains SnackbarHostState that we can use to show a new Snackbar. We just need to provide necessary parameters such as a message or action label. However, showSnackbar is a suspended function and we can’t call it directly.

Let’s use a coroutine scope to lunch a new coroutine without blocking the current thread. When we press the button now the Snackbar should appear on the screen, however, we don’t know if the Snackbar was dismissed or if the user clicked on the action in the Snackbar.

Copy
1@Composable
2fun SnackbarDemo2() {
3    val scaffoldState: ScaffoldState = rememberScaffoldState()
4    val coroutineScope: CoroutineScope = rememberCoroutineScope()
5
6    Scaffold(scaffoldState = scaffoldState) {
7        Button(onClick = {
8            coroutineScope.launch {
9                scaffoldState.snackbarHostState.showSnackbar(
10                    message = "This is your message",
11                    actionLabel = "Do something"
12                )
13            }
14        }) {
15            Text(text = "Click me!")
16        }
17    }
18}

To get this information we just need to check SnackbarResult returned by the suspended function. SnackbarResult is enum and can have value either Dimissined or ActionPerformed. Then we can implement our business logic accordingly.

Copy
1@Composable
2fun SnackbarDemo3() {
3    val scaffoldState: ScaffoldState = rememberScaffoldState()
4    val coroutineScope: CoroutineScope = rememberCoroutineScope()
5
6    Scaffold(scaffoldState = scaffoldState) {
7        Button(onClick = {
8            coroutineScope.launch {
9                val snackbarResult = scaffoldState.snackbarHostState.showSnackbar(
10                    message = "This is your message",
11                    actionLabel = "Do something"
12                )
13                when (snackbarResult) {
14                    SnackbarResult.Dismissed -> Log.i("snackbarResult", "SnackbarResult.Dismissed")
15                    SnackbarResult.ActionPerformed -> Log.i(
16                        "snackbarResult",
17                        "SnackbarResult.ActionPerformed"
18                    )
19                }
20            }
21        }) {
22            Text(text = "Click me!")
23        }
24    }
25}

For full working code please visit

https://github.com/anishakd4/SnackBarDemoJetpackCompose