Hi all, How can I create custom snack bar which us...

# compose

[Daniel Rotenberg]

Hi all,
How can I create custom snack bar which used in scaffold? details in thread.

[Daniel Rotenberg]

The only one I found is in google samples here:


fun ScaffoldWithCustomSnackbar()…

The issue that this current example uses the Snackbar function which doesn’t expose the option to configure the content itself, just configure stuff like color.
What I am trying to achieve is something like the attached screenshot.
(icon first , then text, then another icon, which will be clickable to dismiss the snackbar)
Can anyone point me to link/snippet how to achieve this?

[Kari Kähkönen]

There exists a variant of the Snackbar composable that takes content as an argument. So you could do something like this (not a proper implementation, just an example):

SnackbarHost(it) { data ->
    Snackbar(
        backgroundColor = Color.Black,
        shape = RoundedCornerShape(12.dp),
        modifier = Modifier.padding(8.dp)
    ) {
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(<http://Icons.Outlined.Info|Icons.Outlined.Info>, contentDescription = null, modifier = Modifier.padding(end = 16.dp))
                Text(data.message)
            }
            Icon(Icons.Default.Close, contentDescription = null, modifier = Modifier.clickable { data.dismiss() })
        }
    }
}

If you need to have multiple different looking snackbars in your application, then it gets more difficult. At least I haven't found out a way to pass custom data to the snackbar host. One way is to encode additional data in the snackbar message (e.g., "blue#some random message" and just display message after the "#" to the user ), but that is a bit hacky.