How to Add a Snackbar to Jetpack Compose

Snackbars are now the default way to show transitory information in Android. They replaced Toasts a while ago and for good reason!

If you're using Jetpack Compose, it's a bit of a procedure to use them though. Here's how you do it.

If you need a quick refresher, here's the answer. Don't worry if it doesn't make sense, I'll explain all the components by the end of the article.

snackbarCoroutineScope.launch{
    scaffoldState.snackbarHostState.showSnackbar("Snacks in Compose")
}

Note: This is valid as of Jetpack Compose Beta 3 (1.0.0-beta03)

Starting With a Button

We'll start off with a Compose UI that has a button which prints a log and then instead of a log, we'll get to a point where it can show a Snackbar.

Here's that button printing a log.

@Composable
fun MainScreenUI() {
    Button(onClick = { Log.d("tag", "Button Clicked") }) {
        Text("Click Me")
    }
}

For a conventional Snackbar, you need a Scaffold. A scaffold is a container that makes it easy to add all kinds of standard UI like top bars, bottom bars and even places the Snackbar conveniently for you. The 'state' of the Snackbar is held within the state of the Scaffold.

I'm guessing you already have some UI in a Compose function so just add a Scaffold to the top.

Halfway There, Adding the Scaffold

@Composable
fun MainScreenUI() {

    Scaffold {
        Button(onClick = { Log.d("tag", "Button Clicked") }) {
            Text("Click Me")
        }
    }

}

Now we need two things:

1. A ScaffoldState so we can get at the SnackbarState within it.
2. Snackbars are generally animated and do some background work to appear so we also need a CoroutineScope to run their background work in.

Personally I think it's a bit strange that we've got to handle the background animation of the Snackbar ourselves but that's the api.

Getting To the SnackbarState

First we'll add the ScaffoldState

@Composable
fun MainScreenUI() {

    val scaffoldState = rememberScaffoldState()

    Scaffold(scaffoldState = scaffoldState) {
        Button(onClick = { Log.d("tag", "Button Clicked") }) {
            Text("Click Me")
        }
    }

}

Note: We'll be using 'remember' which wraps a state object for the ScaffoldState into a value that persists after recompositions. If you want more details on that, ask me on Twitter I'll be happy to answer.

Now we'll create a CoroutineScope for the SnackBar and launch it, in place of the log!

The Complete Code

@Composable
fun MainScreenUI() {

    val scaffoldState = rememberScaffoldState()
    val snackbarCoroutineScope = rememberCoroutineScope()

    Scaffold(scaffoldState = scaffoldState) {
        Button(onClick = { 
            snackbarCoroutineScope.launch {
                scaffoldState.snackbarHostState.showSnackbar("Button Clicked")
            }
        } ) {
            Text("Click Me")
        }
    }

}

As you can see, finally it all comes down the line:

snackbarCoroutineScope.launch {
    scaffoldState.snackbarHostState.showSnackbar("Button Clicked")
}

The SnackbarState is within the ScaffoldState we retrieved. The new CoroutineScope we created is used to launch the snackbar.

Easy as pie! Once you know what's going on that is.

---

I'm on the lookout for a Senior Android position with great customer impact, a great team and great compensation. Let me know if you're hiring! Also open to consulting contracts.