Toast not displaying on compose activity

Question

so probably dumb question for someone with experience with Jetpack Compose, but for some reason my Toast are not displaying. Here's the snippet for it. I'm sending 3 toasts with .show() in different parts of the onCreate method, and still nothing happens. I also tried using LocalContext.current as context inside a @Composable function but same result, nothing is displayed. I see online many different examples, even videos on youtube in which this exact same could should run. Anybody knows why?

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    Toast.makeText(this, " ASDASDASD ", Toast.LENGTH_LONG).show()
    setContent {
        Toast.makeText(this, " ASDASDASD ", Toast.LENGTH_LONG).show()
        MyApplicationTheme {
            // A surface container using the 'background' color from the theme
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colors.background
            ) {
                Toast.makeText(this, " ASDASDASD ", Toast.LENGTH_LONG).show()
                Greeting("Android")
            }
        }
    }
}

Answer 1

You need to use a scaffold for displaying toasts

Code:

class SimpleFormActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val scaffoldState = rememberScaffoldState()
            var inputFieldState by remember { mutableStateOf("") }
            val scope = rememberCoroutineScope()

            Scaffold(
                modifier = Modifier.fillMaxSize(),
                scaffoldState = scaffoldState
            ) { padding ->
                Column(
                    Modifier
                        .fillMaxSize()
                        .padding(50.dp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    TextField(
                        value = inputFieldState,
                        label = {
                            Text(text = "Enter your name")
                        },
                        onValueChange = {
                            inputFieldState = it
                        },
                        singleLine = true,
                        modifier = Modifier.fillMaxWidth()
                    )
                    Spacer(modifier = Modifier.height(20.dp))
                    Button(
                        onClick = {
                            scope.launch {
                                scaffoldState.snackbarHostState.showSnackbar(
                                    inputFieldState,
                                    duration = SnackbarDuration.Short
                                )
                            }
                        }) {
                        Text(text = "Click")
                    }
                }
            }
        }
    }
}

Demo:

Answer 2

A sample code to show Toast.

setContent {
    val context = LocalContext.current
    MyAppTheme {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier.fillMaxSize(),
        ) {
            TextButton(
                onClick = {
                    Toast.makeText(context, "Toast", Toast.LENGTH_LONG).show()
                },
            ) {
                Text(text = "Show Toast")
            }
        }
    }
}

Let me break down the important things to look into in this code.

1. Toast should not be part of the composable code, rather it should be part of the side effect code.
   (e.g. onClick(), LaunchedEffect, DisposableEffect, etc.)

2. Get the context inside the composable code using LocalContext.current. Note that you have to store it in a variable as the code inside onClick() does not have composable scope. (As mentioned above).

3. Composables recompose very frequently depending on the UI changes, we don't want to show a Toast every time the composable recomposes.

Refer to Side Effects Docs to understand it better.