Show Snackbar - Android Studio - Compose

How to show a Snackbar and a Snackbar with an Action Button?

Learn how to easily display a Snackbar in your Android app using Jetpack Compose in Android Studio. A Snackbar is a lightweight feedback mechanism that appears at the bottom of the screen to show quick messages to users. In this step-by-step tutorial, you’ll understand how to create, customize, and add actions to a Snackbar, making your app more interactive and user-friendly. Perfect for beginners and developers who want to enhance their Android UI/UX with modern material design components.

>> Check for Java
>> Check for Kotlin
>> Check for Compose

Code

Here is the full code to show a Snackbar and a Snackbar with an Action Button

MainActivity.kt

package com.technifysoft.myapplication

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.SnackbarResult
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.technifysoft.myapplication.ui.theme.MyApplicationTheme
import kotlinx.coroutines.launch

class MainActivityCompose : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {

                // remember SnackbarHostState
                val snackbarHostState = remember { SnackbarHostState() }

                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    snackbarHost = { SnackbarHost(hostState = snackbarHostState) } // Add SnackbarHost
                ) { innerPadding ->
                    MainUI(
                        modifier = Modifier.padding(innerPadding),
                        snackbarHostState = snackbarHostState // Pass SnackbarHostState
                    )
                }

            }
        }
    }
}

@Composable
fun MainUI(modifier: Modifier = Modifier, snackbarHostState: SnackbarHostState) {
    val context = LocalContext.current
    // remember a CoroutineScope to launch snackbar
    val scope = rememberCoroutineScope()

    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Button(modifier = Modifier
            .padding(horizontal = 30.dp)
            .fillMaxWidth(),
            onClick = {
            scope.launch {
                snackbarHostState.showSnackbar("This is a simple Snackbar message")
            }
        }) {
            Text("Show Snackbar")
        }

        Button(modifier = Modifier
            .padding(horizontal = 30.dp)
            .fillMaxWidth(),
            onClick = {
            scope.launch {
                val result = snackbarHostState.showSnackbar(
                    message = "Snackbar Message with Action",
                    actionLabel = "My Action",
                    duration = SnackbarDuration.Short
                )
                when (result) {
                    SnackbarResult.ActionPerformed -> {
                        // Action performed (e.g., user clicked "Retry")
                        // Add your logic here, for example, show another snackbar or log
                        scope.launch {
                            Toast.makeText(context, "Action Clicked!", Toast.LENGTH_SHORT).show()
                        }
                    }

                    SnackbarResult.Dismissed -> {
                        // Snackbar dismissed
                    }
                }
            }
        }) {
            Text("Show Snackbar with Action button")
        }
    }
}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        // For preview, we can pass a dummy SnackbarHostState
        val snackbarHostState = remember { SnackbarHostState() }
        MainUI(snackbarHostState = snackbarHostState)
    }
}

Screenshot