How to add Snackbar in Android Jetpack Compose

By Mohammed Rashid •  November 20th, 2022 • 

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.

snackbar jetpack compose

I hope this Jetpack Compose tutorial to show Snackbar in Android is helpful for you.

Mohammed Rashid

Keep Reading