Jetpack Compose Toast

Toasts are brief notifications that provide simple feedback about an operation. They appear at the bottom of the screen, contain only text messages, and automatically disappear after a timeout.

Implementing Toast in Jetpack Compose

Since Toast is part of the Android framework and not specific to Compose, we need to access the context to display it in our Compose UI.

import android.widget.Toast  
import androidx.compose.foundation.layout.Column  
import androidx.compose.foundation.layout.Spacer  
import androidx.compose.foundation.layout.height  
import androidx.compose.foundation.layout.padding  
import androidx.compose.material.Button  
import androidx.compose.material.Text  
import androidx.compose.runtime.Composable  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.platform.LocalContext  
import androidx.compose.ui.unit.dp  
  
@Composable  
fun ToastExample() {  
    // Get the current context  
    val context = LocalContext.current  
      
    Column(modifier = Modifier.padding(16.dp)) {  
        Button(  
            onClick = {  
                // Show a short toast message  
                Toast.makeText(  
                    context,  
                    "This is a short Toast message",  
                    Toast.LENGTH_SHORT  
                ).show()  
            }  
        ) {  
            Text("Show Short Toast")  
        }  
          
        Spacer(modifier = Modifier.height(8.dp))  
          
        Button(  
            onClick = {  
                // Show a long toast message  
                Toast.makeText(  
                    context,  
                    "This is a longer Toast message that stays visible for more time",  
                    Toast.LENGTH_LONG  
                ).show()  
            }  
        ) {  
            Text("Show Long Toast")  
        }  
    }  
}  

Key Properties of Toast in Compose Applications

1. Duration

Toasts have two standard durations:

• Toast.LENGTH_SHORT: Displays for approximately 2 seconds
• Toast.LENGTH_LONG: Displays for approximately 3.5 seconds

2. Position

By default, toasts appear at the bottom of the screen, but you can customize their position:

import android.view.Gravity  
import android.widget.Toast  
import androidx.compose.foundation.layout.Column  
import androidx.compose.foundation.layout.padding  
import androidx.compose.material.Button  
import androidx.compose.material.Text  
import androidx.compose.runtime.Composable  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.platform.LocalContext  
import androidx.compose.ui.unit.dp  
  
@Composable  
fun CustomPositionToastExample() {  
    val context = LocalContext.current  
      
    Column(modifier = Modifier.padding(16.dp)) {  
        Button(  
            onClick = {  
                val toast = Toast.makeText(  
                    context,  
                    "Toast at the top of screen",  
                    Toast.LENGTH_SHORT  
                )  
                // Set the gravity to top  
                toast.setGravity(Gravity.TOP or Gravity.CENTER_HORIZONTAL, 0, 50)  
                toast.show()  
            }  
        ) {  
            Text("Top Toast")  
        }  
          
        Button(  
            onClick = {  
                val toast = Toast.makeText(  
                    context,  
                    "Toast at the center of screen",  
                    Toast.LENGTH_SHORT  
                )  
                // Set the gravity to center  
                toast.setGravity(Gravity.CENTER, 0, 0)  
                toast.show()  
            }  
        ) {  
            Text("Center Toast")  
        }  
          
        Button(  
            onClick = {  
                val toast = Toast.makeText(  
                    context,  
                    "Toast at the bottom-right of screen",  
                    Toast.LENGTH_SHORT  
                )  
                // Set the gravity to bottom-right  
                toast.setGravity(Gravity.BOTTOM or Gravity.END, 20, 20)  
                toast.show()  
            }  
        ) {  
            Text("Bottom-Right Toast")  
        }  
    }  
}  

3. Custom Toast Layout

For more complex needs, you can create custom toast layouts:

import android.view.Gravity  
import android.view.LayoutInflater  
import android.widget.ImageView  
import android.widget.TextView  
import android.widget.Toast  
import androidx.compose.foundation.layout.padding  
import androidx.compose.material.Button  
import androidx.compose.material.Text  
import androidx.compose.runtime.Composable  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.platform.LocalContext  
import androidx.compose.ui.unit.dp  
  
@Composable  
fun CustomLayoutToastExample() {  
    val context = LocalContext.current  
      
    Button(  
        onClick = {  
            // Inflate the custom layout  
            val inflater = LayoutInflater.from(context)  
            val layout = inflater.inflate(R.layout.custom_toast_layout, null)  
              
            // Set the text and image  
            val text = layout.findViewById<TextView>(R.id.toast_text)  
            text.text = "Custom Toast with Image"  
              
            val image = layout.findViewById<ImageView>(R.id.toast_image)  
            image.setImageResource(R.drawable.ic_notification)  
              
            // Create and show the Toast  
            val toast = Toast(context)  
            toast.setGravity(Gravity.CENTER, 0, 0)  
            toast.duration = Toast.LENGTH_LONG  
            toast.view = layout  
            toast.show()  
        },  
        modifier = Modifier.padding(16.dp)  
    ) {  
        Text("Show Custom Toast")  
    }  
}  
  
// Note: You'll need to create a layout file named custom_toast_layout.xml  
// Example layout:  
/*  
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/custom_toast_layout"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:background="@drawable oast_background"  
    android:orientation="horizontal"  
    android:padding="16dp">  
  
    <ImageView  
        android:id="@+id oast_image"  
        android:layout_width="24dp"  
        android:layout_height="24dp"  
        android:layout_marginEnd="8dp"  
        android:contentDescription="Toast Icon" />  
  
    <TextView  
        android:id="@+id oast_text"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:textColor="#FFFFFF" />  
</LinearLayout>  
*/  

Creating a Reusable Toast Function for Compose

For better code organization and reusability, let's create a helper function for showing toasts:

import android.content.Context  
import android.view.Gravity  
import android.widget.Toast  
import androidx.compose.runtime.Composable  
import androidx.compose.runtime.rememberCoroutineScope  
import androidx.compose.ui.platform.LocalContext  
import kotlinx.coroutines.launch  
  
/**  
 * Shows a toast message with the specified parameters.  
 *   
 * @param message The message to display.  
 * @param duration The duration for which the toast should be visible.  
 * @param gravity The position of the toast on the screen.  
 * @param xOffset The x-offset from the specified gravity.  
 * @param yOffset The y-offset from the specified gravity.  
 */  
fun Context.showToast(  
    message: String,  
    duration: Int = Toast.LENGTH_SHORT,  
    gravity: Int = Gravity.BOTTOM,  
    xOffset: Int = 0,  
    yOffset: Int = 0  
) {  
    val toast = Toast.makeText(this, message, duration)  
    toast.setGravity(gravity, xOffset, yOffset)  
    toast.show()  
}  
  
/**  
 * A composable function that provides an easy way to show toasts from within composable functions.  
 */  
@Composable  
fun rememberToastHelper(): ToastHelper {  
    val context = LocalContext.current  
    val scope = rememberCoroutineScope()  
    return remember { ToastHelper(context, scope) }  
}  
  
/**  
 * Helper class for showing toasts from composable functions.  
 */  
class ToastHelper(  
    private val context: Context,  
    private val scope: CoroutineScope  
) {  
    /**  
     * Shows a toast message.  
     *   
     * @param message The message to display.  
     * @param duration The duration for which the toast should be visible.  
     */  
    fun showToast(message: String, duration: Int = Toast.LENGTH_SHORT) {  
        scope.launch {  
            Toast.makeText(context, message, duration).show()  
        }  
    }  
      
    /**  
     * Shows a positioned toast message.  
     *   
     * @param message The message to display.  
     * @param duration The duration for which the toast should be visible.  
     * @param gravity The position of the toast on the screen.  
     * @param xOffset The x-offset from the specified gravity.  
     * @param yOffset The y-offset from the specified gravity.  
     */  
    fun showPositionedToast(  
        message: String,   
        duration: Int = Toast.LENGTH_SHORT,  
        gravity: Int = Gravity.CENTER,  
        xOffset: Int = 0,  
        yOffset: Int = 0  
    ) {  
        scope.launch {  
            val toast = Toast.makeText(context, message, duration)  
            toast.setGravity(gravity, xOffset, yOffset)  
            toast.show()  
        }  
    }  
}  

Using the Toast Helper in Compose UI

Now let's see how to use our reusable toast helper in a practical example:

import android.view.Gravity  
import android.widget.Toast  
import androidx.compose.foundation.layout.Column  
import androidx.compose.foundation.layout.Spacer  
import androidx.compose.foundation.layout.fillMaxSize  
import androidx.compose.foundation.layout.height  
import androidx.compose.foundation.layout.padding  
import androidx.compose.material.Button  
import androidx.compose.material.OutlinedTextField  
import androidx.compose.material.Text  
import androidx.compose.runtime.Composable  
import androidx.compose.runtime.getValue  
import androidx.compose.runtime.mutableStateOf  
import androidx.compose.runtime.remember  
import androidx.compose.runtime.setValue  
import androidx.compose.ui.Alignment  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.platform.LocalContext  
import androidx.compose.ui.unit.dp  
  
@Composable  
fun ToastDemoScreen() {  
    val context = LocalContext.current  
    // Using our custom toast helper  
    val toastHelper = rememberToastHelper()  
      
    var messageText by remember { mutableStateOf("Hello, Toast!") }  
      
    Column(  
        modifier = Modifier  
            .fillMaxSize()  
            .padding(16.dp),  
        horizontalAlignment = Alignment.CenterHorizontally  
    ) {  
        OutlinedTextField(  
            value = messageText,  
            onValueChange = { messageText = it },  
            label = { Text("Toast Message") }  
        )  
          
        Spacer(modifier = Modifier.height(16.dp))  
          
        Button(onClick = {  
            // Using extension function directly  
            context.showToast(messageText)  
        }) {  
            Text("Show Simple Toast")  
        }  
          
        Spacer(modifier = Modifier.height(8.dp))  
          
        Button(onClick = {  
            // Using toast helper  
            toastHelper.showToast(messageText, Toast.LENGTH_LONG)  
        }) {  
            Text("Show Long Toast")  
        }  
          
        Spacer(modifier = Modifier.height(8.dp))  
          
        Button(onClick = {  
            // Using positioned toast  
            toastHelper.showPositionedToast(  
                message = messageText,  
                duration = Toast.LENGTH_SHORT,  
                gravity = Gravity.TOP or Gravity.CENTER_HORIZONTAL,  
                yOffset = 50  
            )  
        }) {  
            Text("Show Top Toast")  
        }  
          
        Spacer(modifier = Modifier.height(8.dp))  
          
        Button(onClick = {  
            // Using extension function with custom position  
            context.showToast(  
                message = messageText,  
                duration = Toast.LENGTH_SHORT,  
                gravity = Gravity.CENTER,  
                xOffset = 0,  
                yOffset = 0  
            )  
        }) {  
            Text("Show Center Toast")  
        }  
    }  
}  

Best Practices for Using Toast in Jetpack Compose

1. Keep Messages Short and Concise

Toasts are designed for brief messages. If your message is longer than a few words, consider using a Snackbar instead.

// Good  
"Item saved"  
  
// Bad  
"Your item has been successfully saved to the database and will be available for future use"  

2. Use Toast for Non-Critical Information

Toasts automatically disappear and don't require user interaction. Use them for informational messages that don't require user action.

// Good usage of Toast  
Toast.makeText(context, "Settings updated", Toast.LENGTH_SHORT).show()  
  
// Better with Snackbar (when action is needed)  
Snackbar.make(view, "No internet connection", Snackbar.LENGTH_LONG)  
    .setAction("Retry") { /* retry logic */ }  
    .show()  

3. Don't Overuse Toasts

Too many toast messages can annoy users. Use them sparingly for important but non-critical information.

4. Consider Accessibility

Toast messages disappear automatically, which can cause issues for users with accessibility needs. Consider providing alternative feedback methods for critical information.

Common Toast Implementation Patterns in Compose

1. Toast with ViewModel

import android.app.Application  
import android.widget.Toast  
import androidx.compose.runtime.Composable  
import androidx.compose.runtime.LaunchedEffect  
import androidx.compose.ui.platform.LocalContext  
import androidx.lifecycle.AndroidViewModel  
import androidx.lifecycle.viewmodel.compose.viewModel  
import kotlinx.coroutines.flow.MutableSharedFlow  
import kotlinx.coroutines.flow.asSharedFlow  
  
// Event class for showing toast  
sealed class UiEvent {  
    data class ShowToast(val message: String, val duration: Int = Toast.LENGTH_SHORT) : UiEvent()  
}  
  
// ViewModel with toast event  
class ToastViewModel(application: Application) : AndroidViewModel(application) {  
      
    private val _uiEvent = MutableSharedFlow<UiEvent>()  
    val uiEvent = _uiEvent.asSharedFlow()  
      
    // Function to show toast  
    suspend fun showToast(message: String, duration: Int = Toast.LENGTH_SHORT) {  
        _uiEvent.emit(UiEvent.ShowToast(message, duration))  
    }  
      
    // Example function that might trigger a toast  
    fun saveData(data: String) {  
        // Save logic...  
        // After saving  
        viewModelScope.launch {  
            showToast("Data saved successfully")  
        }  
    }  
}  
  
// Composable to collect toast events  
@Composable  
fun ToastEventCollector(viewModel: ToastViewModel = viewModel()) {  
    val context = LocalContext.current  
      
    LaunchedEffect(key1 = true) {  
        viewModel.uiEvent.collect { event ->  
            when (event) {  
                is UiEvent.ShowToast -> {  
                    Toast.makeText(context, event.message, event.duration).show()  
                }  
            }  
        }  
    }  
}  
  
// Usage in your UI  
@Composable  
fun ToastWithViewModelScreen(viewModel: ToastViewModel = viewModel()) {  
    // Collect toast events  
    ToastEventCollector(viewModel)  
      
    // Your UI content  
    Column {  
        Button(onClick = {  
            viewModel.viewModelScope.launch {  
                viewModel.showToast("Button clicked!")  
            }  
        }) {  
            Text("Show Toast from ViewModel")  
        }  
    }  
}  

2. Creating a Custom Toast-Like Composable

For full control over appearance and behavior, you can create a toast-like composable:

import androidx.compose.animation.AnimatedVisibility  
import androidx.compose.animation.core.MutableTransitionState  
import androidx.compose.animation.core.tween  
import androidx.compose.animation.fadeIn  
import androidx.compose.animation.fadeOut  
import androidx.compose.animation.slideInVertically  
import androidx.compose.animation.slideOutVertically  
import androidx.compose.foundation.background  
import androidx.compose.foundation.layout.Box  
import androidx.compose.foundation.layout.fillMaxSize  
import androidx.compose.foundation.layout.padding  
import androidx.compose.foundation.shape.RoundedCornerShape  
import androidx.compose.material.Card  
import androidx.compose.material.Text  
import androidx.compose.runtime.Composable  
import androidx.compose.runtime.LaunchedEffect  
import androidx.compose.runtime.mutableStateOf  
import androidx.compose.runtime.remember  
import androidx.compose.ui.Alignment  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.graphics.Color  
import androidx.compose.ui.text.style.TextAlign  
import androidx.compose.ui.unit.dp  
import androidx.compose.ui.unit.sp  
import kotlinx.coroutines.delay  
  
/**  
 * A custom composable that mimics the behavior of a Toast but with full control  
 * over appearance and animation.  
 *   
 * @param message The message to display.  
 * @param duration How long the toast should be visible in milliseconds.  
 * @param modifier Modifier for the toast container.  
 */  
@Composable  
fun ComposeToast(  
    message: String,  
    duration: Long = 2000L,  
    modifier: Modifier = Modifier  
) {  
    Box(  
        modifier = Modifier.fillMaxSize(),  
        contentAlignment = Alignment.BottomCenter  
    ) {  
        val visible = remember { MutableTransitionState(false).apply { targetState = true } }  
          
        LaunchedEffect(key1 = message) {  
            delay(duration)  
            visible.targetState = false  
        }  
          
        AnimatedVisibility(  
            visibleState = visible,  
            enter = fadeIn(animationSpec = tween(300)) +   
                   slideInVertically(animationSpec = tween(300)) { fullHeight -> fullHeight },  
            exit = fadeOut(animationSpec = tween(300)) +   
                   slideOutVertically(animationSpec = tween(300)) { fullHeight -> fullHeight }  
        ) {  
            Card(  
                modifier = modifier  
                    .padding(16.dp),  
                shape = RoundedCornerShape(8.dp),  
                backgroundColor = Color(0xFF323232)  
            ) {  
                Text(  
                    text = message,  
                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 10.dp),  
                    color = Color.White,  
                    fontSize = 14.sp,  
                    textAlign = TextAlign.Center  
                )  
            }  
        }  
    }  
}  
  
// Usage example  
@Composable  
fun CustomToastDemo() {  
    val showToast = remember { mutableStateOf(false) }  
    val toastMessage = remember { mutableStateOf("") }  
      
    Box(modifier = Modifier.fillMaxSize()) {  
        Button(  
            onClick = {  
                toastMessage.value = "This is a custom Compose Toast!"  
                showToast.value = true  
            },  
            modifier = Modifier.align(Alignment.Center)  
        ) {  
            Text("Show Custom Toast")  
        }  
          
        if (showToast.value) {  
            ComposeToast(  
                message = toastMessage.value,  
                duration = 2000L  
            )  
              
            // Reset the state after showing  
            LaunchedEffect(key1 = Unit) {  
                delay(2300L) // slightly longer than the toast duration  
                showToast.value = false  
            }  
        }  
    }  
}  

Toast vs. Snackbar: When to Use Each

While Toasts provide simple feedback, Snackbars offer more features. Here's a comparison to help you choose: