Exploring Jetpack Compose: Snackbar

If you’re enjoying my posts on Jetpack Compose, check out some details on the book I’ll be writing on Compose!

Snackbars provide us with a way to show short, non-blocking alerts to the user. Usually displayed at the bottom of the screen, these components can also provide a single action for the user to take in the context of the given message. Jetpack Compose provides us a minimal API that can be used to create a snackbar component for use within our UI. If we dive into the source code for this component we can see the single function that is available for creating a new instance:

@Composable
fun Snackbar(
    text: @Composable() () -> Unit,
    action: @Composable() (() -> Unit)? = null,
    modifier: Modifier = Modifier.None,
    actionOnNewLine: Boolean = false
)

We can see here that there are four available properties that we can pass to the Snackbar function:

• text – the text to be displayed within the snackbar. This is required
• action – an action, in the form of a composable, to be displayed within the snackbar
• modifier – the modifier(s) to be applied to the snackbar
• actionOnNewLine – declares whether the action text should be displayed on a new line

With these properties in mind, we can create a minimal Snackbar component by passing the only required property to the composable function:

Snackbar(
    text = { Text(text = "This is a snackbar!") }
)

With this, we get a Snackbar component that displays our given text property inside of the component. Whilst this might suffice in most scenarios when wanting to show Snackbars, we may want to sometimes display actions with the component also. These actions allow our users to interact with the backbar to perform some action within the context of the snackbar message. In these cases, we can utilise the action property of our snackbar:

Snackbar(
    text = { Text(text = "This is a snackbar!") },
    action = {
        Clickable(onClick = {
            // Handle action
        }) {
            Text(
                text = "Undo",
                modifier = Modifier.padding(16.dp),
                style = TextStyle(
                    fontWeight = FontWeight.Bold,
                    color = snackbarPrimaryColorFor(MaterialTheme.colors)
                )
            )
        }
    }
)

Here we provide a composable to the action property that will display some text to the user, wrapped by a Clickable component – this allows us to capture any click events on the component so that we can handle the interaction accordingly. Because the action is a composable, you can in theory pass any composable element here – but to follow the material guidelines, a descriptive text item here should suffice.

When providing an action, there may be cases where we wish to display it on a new line – for example, maybe the textual content of the snackbar needs a little more space, spanning to the end of the component width. In this case it would make sense to place the action on a new line, which we can do using the actionOnNewLine property:

Snackbar(
    text = { Text(text = "This is a snackbar with a lot of text, that way it makes sense to use the new line!") },
    action = {
        Clickable(onClick = {
            // Handle action
        }) {
            Text(
                text = "Undo",
                modifier = Modifier.padding(16.dp),
                style = TextStyle(
                    fontWeight = FontWeight.Bold,
                    color = snackbarPrimaryColorFor(MaterialTheme.colors)
                )
            )
        }
    },
    actionOnNewLine = true
)

---

In this post we’ve taken a quick dive into the Snackbar component from Jetpack Compose. Stay tuned for the next post and in the meantime, subscribe to updates on my Jetpack Compose book 🙂