Snackbar in Android using Jetpack Compose
Snackbar is a lightweight widget and they are used to show messages at the bottom of the application. It was introduced with the Material Design library as a replacement for a Toast. In this article, we will explain how you can create a Snackbar using Jetpack Compose. Below is the sample picture to show what we are going to build.
There are two types of snack bars. Always visible Snack bar and those which pop up when some action is performed. We are going to see both examples in this Article.
Prerequisites:
Step by Step Implementation
Step 1 : Create a new project
To create a new project in Android Studio using Jetpack Compose please refer to How to Create a New Project in Android Studio Canary Version with Jetpack Compose.
Step 2 : Working with MainActivity.kt (Always visible Snack bar)
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
MainActivity.kt:
package com.geeksforgeeks.demo
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.*
import androidx.compose.material3.MaterialTheme.typography
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.*
import com.geeksforgeeks.demo.ui.theme.DemoTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
// force setting it to light theme and turning off dynamic theme
DemoTheme(dynamicColor = false, darkTheme = false) {
Surface(color = Color.White) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column(modifier = Modifier.padding(10.dp), horizontalAlignment = Alignment.CenterHorizontally) {
SnackBars()
}
}
}
}
}
}
}
@Preview
@Composable
fun SnackBars() {
Text(text = "Snack bars", style = typography.headlineLarge, modifier = Modifier.padding(8.dp))
// Normal Snackbar
Snackbar(
modifier = Modifier.padding(4.dp),
dismissAction = {
IconButton(onClick = {}) {
Icon(Icons.Filled.Close, contentDescription = "Close")
}
}
) {
Text(text = "This is a basic snackbar")
}
// Snackbar with action item
Snackbar(
modifier = Modifier.padding(4.dp),
action = {
TextButton(onClick = {}) {
Text(text = "Action")
}
},
dismissAction = {
IconButton(onClick = {}) {
Icon(Icons.Filled.Close, contentDescription = "Close")
}
}
) {
Text(text = "This is a basic Snackbar with action item")
}
// Snackbar with action item below text
Snackbar(
modifier = Modifier.padding(4.dp),
actionOnNewLine = true,
action = {
TextButton(onClick = {}) {
Text(text = "Action")
}
},
dismissAction = {
IconButton(onClick = {}) {
Icon(Icons.Filled.Close, contentDescription = "Close")
}
}
) {
Text(text = "Snackbar with action item below text")
}
}
Output:
Step 3 : Working with MainActivity.kt ( Temporary Snack bar)
Temporary Snack bars appear only temporarily on the screen on response to any action performed inside the application. A Snackbar might pop up when a user submits a form, deletes an item, or performs some other action. You may have seen in Gmail application, whenever you send someone an email, a snackbar appears for some time and an action button ‘undo’ is written on it.
MainActivity.kt:
package com.geeksforgeeks.demo
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import com.geeksforgeeks.demo.ui.theme.DemoTheme
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
// force setting it to light theme and turning off dynamic theme
DemoTheme(dynamicColor = false, darkTheme = false) {
// a state object that represents the current state of the Snackbar
val snackbarHostState = remember { SnackbarHostState() }
// Creates a CoroutineScope specific to the composable's lifecycle, so the coroutine can be used to show the Snackbar in an asynchronous, non-blocking way.
val scope = rememberCoroutineScope()
Scaffold(
snackbarHost = { SnackbarHost(snackbarHostState) }
) { innerPadding ->
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center,
) {
Column(
modifier = Modifier.padding(innerPadding),
horizontalAlignment = Alignment.CenterHorizontally
) {
// call the function which contains all the snack bars
// Call the function to display button which triggers temporary snackbar
ActionTriggeredSnackbar(scope, snackbarHostState)
}
}
}
}
}
}
}
@Composable
fun ActionTriggeredSnackbar(scope: CoroutineScope, snackbarHostState: SnackbarHostState) {
Column {
// Button: It triggers the temporary snack bar to show up.
Button(
onClick = {
scope.launch {
snackbarHostState.showSnackbar(
message = "Temporary Snackbar",
actionLabel = "Dismiss",
duration = SnackbarDuration.Short
)
}
}
) {
Text(
text = "Show Temporary Snackbar"
)
}
}
}
