AndroidWave
Android Jetpack

How to create the Snackbar in Jetpack Compose

In Android Jetpack 4 Mins Read
Pinterest LinkedIn Tumblr
snackbar in compose

In this android tutorial, we’ll learn how to create Snackbar component using Jetpack Compose in Kotlin along with code snippets and practical examples.

Creating and displaying a simple Snackbar.

One of the most common use cases for Snackbars is to display short, informative messages to users. To create and display a simple Snackbar in Jetpack Compose, you first need to add Jetpack Compose dependency

Import the required packages

import androidx.compose.material.Scaffold
import androidx.compose.material.Snackbar
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

Create Snackbar component

Next, you can define a Composable function that creates the Snackbar component and passes it a message to display. Here’s an example

@Composable
fun SimpleSnackbar(isVisible: Boolean, message: String) {
    Scaffold { contentPadding ->
        //...your app's UI components go here...
        if (isVisible) {
            Snackbar(modifier = Modifier.padding(contentPadding), content = { Text(message) })
        }
    }
}

Simple Snackbar with Action 

@Composable
fun SnackbarWithAction(isVisible: Boolean, message: String) {
    if (isVisible) {
        Snackbar(action = {
            Button(onClick = {}) {
                Text("Do Somethings")
            }
        }, modifier = Modifier.padding(8.dp), content = { Text(message) })
    }
}

How to use it

Once you’ve defined your SimpleSnackbar function. You can call it anywhere in your app’s code where you want to display a quick message to users

@Composable
fun MainUi() {
    val (isVisible, setVisible) = remember { mutableStateOf(false) }
    Column() {
        Button(onClick = { setVisible(!isVisible) }, modifier = Modifier.padding(8.dp)) {
            Text(text = "Show Snackbar")
        }
        SimpleSnackbar(isVisible = isVisible, message = "Jetpack Compose Snackbar Demo")
        SnackbarWithAction(isVisible = isVisible, message = "Jetpack Compose Snackbar Demo")
    }
}

And there you have it – with just a few lines of code. you can create and display Snackbars in your Jetpack Compose app.

While the Snackbar component in Jetpack Compose comes with default appearance and behavior styles. But you can also customize it to fit your app’s look and feel. 

For example, you can modify the Snackbar’s background color or text color by applying a MaterialTheme object to its Modifier. You can also adjust the duration that the Snackbar is displayed on screen, or add additional actions for users to take within the Snackbar itself.

CustomSnackbar with Scaffold Example 

@Composable
fun ScaffoldSnackbar(state: ScaffoldState, contentPadding: PaddingValues) {
    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    Column() {
        Button(onClick = {

            coroutineScope.launch {
                val result = state.snackbarHostState.showSnackbar(
                    message = "Button clicked",
                    duration = SnackbarDuration.Short,
                    actionLabel = "Action"
                )
                when (result) {
                    SnackbarResult.ActionPerformed -> {
                        Toast.makeText(context, "Snackbar action performed", Toast.LENGTH_SHORT)
                            .show()
                    }
                    SnackbarResult.Dismissed -> {
                        Toast.makeText(context, "Snackbar action performed", Toast.LENGTH_SHORT)
                            .show()
                    }
                }
            }
        }) {
            Text(text = "Show Snackbar Scaffold")
        }
    }
}

How to use that

val scaffoldState = rememberScaffoldState()
Scaffold(scaffoldState = scaffoldState) { contentPadding ->
    ScaffoldSnackbar(scaffoldState,contentPadding)
}

Best practices for using the Snackbar component effectively

To use the Snackbar component effectively in your Jetpack Compose app, it’s important to follow best practices.

  1. First, only show the Snackbar when necessary – this means avoiding showing it too frequently or for minor events
  2. Keep the message of the Snackbar concise and easy to understand so that users can quickly comprehend the information being conveyed
  3. Customize the appearance and behavior of the Snackbar to fit within your app’s design language and provide a consistent user experience across all screens

By following these best practices, you can ensure that your use of the Snackbar component enhances your app’s functionality and usability.

Conclusion

In this example, we’re wrapping the Snackbar component in a Scaffold component, which provides a basic app layout structure. The content parameter of the Snackbar component takes a Composable lambda that defines the message text.

I hope this blog will help you to understand, how you can create a customized snack bar in android. Please follow us on social media to become a better developer.

Related Posts

Write A Comment