The snackbar is a UI component to show brief messages with an option to do a specific action. It usually appears at the bottom of the screen and does not interrupt the user. Let’s learn how to create a simple snackbar in Jetpack Compose.
The Snackbar in compose helps us to send a short message with action to users. See the following code snippet.
Snackbar(
action = {
Button(onClick = {}) {
Text("Action")
}
},
modifier = Modifier.padding(8.dp)
) { Text(text = "Jetpack Compose Snackbar Example!") }The position of Snackbar should be at the bottom of the screen and should not interrupt users. Following is the complete code to show snackbar at the bottom.
package com.example.myapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
Surface(
color = MaterialTheme.colors.background,
modifier = Modifier.fillMaxSize()
) {
SnackbarExample()
}
}
}
}
}
@Composable
fun SnackbarExample() {
Column {
val (visible, setVisible) = remember { mutableStateOf(false) }
Button(onClick = { setVisible(!visible) }, modifier = Modifier.padding(20.dp)) {
if (visible) {
Text("Hide Snackbar")
} else {
Text("Show Snackbar")
}
}
Box(
modifier = Modifier.fillMaxSize().padding(20.dp),
){
Row(modifier = Modifier.align(Alignment.BottomEnd)){
if (visible) {
Snackbar(
action = {
Button(onClick = {}) {
Text("Action")
}
},
modifier = Modifier.padding(8.dp)
) { Text(text = "Jetpack Compose Snackbar Example!") }
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
SnackbarExample()
}
}The Snackbar is shown when the Button is pressed. See the output given below.
I hope this Jetpack Compose tutorial to show Snackbar in Android is helpful for you.
