Snackbar in Jetpack Compose

By / September 14, 2023

Snackbar is a valuable component in Jetpack Compose that allows you to provide important notifications and brief messages to users in a non-intrusive manner. In this article, we will explore the features and usage of Snackbar in Jetpack Compose, along with example programs, to help you effectively incorporate this element into your app and enhance the overall user experience.

Understanding Snackbar

Snackbar is a lightweight and temporary notification that appears at the bottom of the screen. It is commonly used to convey information, alerts, or actions to users without interrupting their workflow. Snackbar provides a clean and unobtrusive way to display short-lived messages that can be dismissed by the user or automatically disappear after a specific duration.

Key Features of Snackbar:
 

  1. Display Duration: Snackbar allows you to control the duration for which it is visible on the screen. You can specify a short duration or a longer one depending on the importance of the message.

  2. Customization: Snackbar provides customization options for appearance, including text colour, background colour, icon placement, and action buttons.

  3. Actions: You can include action buttons within the Snackbar to allow users to take immediate actions related to the notification. For example, an “Undo” action to revert a recent operation.

Example Program: Basic Snackbar Implementation:

To demonstrate the usage of the Snackbar in Jetpack Compose, let’s create a simple example program that displays a Snackbar when a button is clicked.

@Composable
fun MyScreen() {
    var snackbarVisible by remember { mutableStateOf(false) }

    Scaffold(
        content = {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Button(
                    onClick = { snackbarVisible = true }
                ) {
                    Text(text = "Show Snackbar")
                }
            }
        }
    )

    if (snackbarVisible) {
        Snackbar(
            modifier = Modifier.padding(16.dp),
            action = {
                TextButton(
                    onClick = { snackbarVisible = false }
                ) {
                    Text(text = "Dismiss")
                }
            }
        ) {
            Text(text = "Snackbar Message")
        }
    }
}

In this example, we define the MyScreen composable function, which utilizes the Scaffold component. Inside the content block, we have a Button that sets the snackbarVisible flag to true when clicked. When the flag is true, the Snackbar component is displayed at the bottom of the screen. The Snackbar includes a “Dismiss” action button and displays the message “Snackbar Message”. Upon clicking the “Dismiss” button, the Snackbar disappears.

Conclusion:

Snackbar in Jetpack Compose provides a convenient way to deliver notifications and brief messages to users, enhancing the overall user experience of your Android app. By utilizing its features such as customizable appearance, action buttons, and controllable display duration, you can effectively communicate important information without interrupting user flow.

Spread the love

Related Posts

Scroll to Top
×