Is there a way to show a Snackbar with a custom Te...

# compose

[Thomas]

Is there a way to show a Snackbar with a custom Text but using the default positioning of the Scaffold SnackbarHost? When using scaffoldState.snackbarHostState.showSnackbar you can only set a String, but I would like to set a Text so I can style the text using annotated string builder. When just including a Snackbar without using Scaffold it appears at the top of the screen, which is not what I want (I would like it at the bottom how it is supposed to be). Looks like the Scaffold/SnackbarHost is setting the correct positions.

[matvei]

You can pass your own SnackbarHost with custom Snackbar appearance in the scaffold is you desire so

[matvei]

Here's the sample for it, e.g. to show a Snackbar with custom border: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]samples/ScaffoldSamples.kt;l=227?q=ScaffoldWithCustomSnackbar

[Thomas]

@matvei thanks for your answer. I tried something like that which looks like the following. Is this really the correct way to do this?

@Composable
fun Sample() {
    val scope = rememberCoroutineScope()
    val scaffoldState = rememberScaffoldState()
    Scaffold(
        scaffoldState = scaffoldState,
        snackbarHost = {
            SnackbarHost(it) { data ->
                if (data.message == "showCustomMessage") {
                    Snackbar {
                        Text(
                            text = buildAnnotatedString {
                                pushStyle(SpanStyle(fontWeight = FontWeight.Bold))
                                append(stringResource(R.string.my_custom_message))
                                pop()
                            }
                        )
                    }
                } else {
                    Snackbar(snackbarData = data)
                }
            }
        },
        content = {
            Button(
                onClick = {
                    scope.launch {
                        scaffoldState.snackbarHostState.showSnackbar("showCustomMessage")
                    }
                }
            ) {
                Text("Show snackbar")
            }
        }
    )
}

[Thomas]

Because I need to create a snackbar myself, I cannot use the showSnackbar suspend function how it is supposed to be used. I am also missing padding around the snackbar.

[Thomas]

I think something like this would make much more sense, but unfortunately that is not possible.

@Composable
fun Sample() {
    val scope = rememberCoroutineScope()
    val scaffoldState = rememberScaffoldState()
    Scaffold(
        scaffoldState = scaffoldState,
        content = {
            Button(
                onClick = {
                    scope.launch {
                        // DOES NOT COMPILE
                        scaffoldState.snackbarHostState.showSnackbar(
                            message = {
                                Text(
                                    text = buildAnnotatedString {
                                        pushStyle(SpanStyle(fontWeight = FontWeight.Bold))
                                        append(stringResource(R.string.my_custom_message))
                                        pop()
                                    }
                                )
                            }
                        )
                    }
                }
            ) {
                Text("Show snackbar")
            }
        }
    )
}

[matvei]

We're yet to support AnnotatedString in snackbar APIs. Please, file a feature request

[matvei]

As for the snipped with custom text above -- it seems like if you really want to have a AnnotatedString -- that's the way that will work for now. If you only want a bold text -- there's a TextStyle object for it

[matvei]

The idea why we didn't introduce the AnnotatedString in snackbars is because snackbars are essentially an in-app notification and mostly they should be the same in different apps for a better user experience, but I agree that sometimes it might be useful

[Thomas]

I filed a feature request: https://issuetracker.google.com/issues/181576279

[Thomas]

I need to use AnnotatedString for the following. It's basically a message which shows which devices are connected to the app.

[matvei]

Thanks a lot!

[Filippo Vigani]

@matvei do you have any updates on this? Even passing some extra snackbar data would help, for instance if I wanted to have different snackbar colors for different message metadata (the simplest example is showing a red snackbar message for errors)

[matvei]

We're considering some API changes in this regard in snackbar in material3 https://android-review.googlesource.com/c/platform/frameworks/support/+/1902091

[matvei]

For now we think of making an overload of snowSnackbar that accepts the arbitrary instance of the SnackbarData , so you can create your own custom class MySnackbarWithMetadata: SnackbarData and then you can do

SnackbarHost(hostState) { data -> 
    if (data is MySnackbarWithMetadata) {
         // show custom snackbar
    } else {
         // show regular snackbar
    }
}

Not the cleanest solution for sure, but it unlocks any custom data propagation, while keeping you mostly in line with specs. Stay tuned 🙂