How to change background color of the jetpack compose snackbar?

Question

I want to change solid or gradient color to jetpack compose snack bar. Please guide me how to
change color

Here is my snack bar using material3 compose, I am looking solution to change the background color

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.*
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.res.painterResource
import androidx.compose.ui.unit.dp
import compose.material.theme.ui.theme.Material3ComposeTheme
import compose.material.theme.ui.theme.Purple40
import kotlinx.coroutines.launch


class MainActivity : ComponentActivity() {

    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Material3ComposeTheme {


                val context = LocalContext.current

                val snackState = remember { SnackbarHostState() }
                val scope = rememberCoroutineScope()

                Scaffold(
                    topBar = {
                    },
                    content = {

                        fun launchSnackbar(message: String, actionLabel : String?=null, duration: SnackbarDuration = SnackbarDuration.Short){
                            scope.launch {
                                snackState.showSnackbar(message = message,actionLabel=actionLabel, duration=duration)
                            }
                        }

                        Column(
                            modifier = Modifier
                                .padding(it)
                                .verticalScroll(rememberScrollState())
                        ) {

                            Spacer(modifier = Modifier.height(47.dp))



                            Text("Snackbar", Modifier.padding(bottom = 10.dp), style = MaterialTheme.typography.labelLarge)
                            Button(onClick = {
                                // *  Snackbar
                                launchSnackbar(message = "Hi i am snackbar message", actionLabel = "Hide", duration = SnackbarDuration.Long)
                            }) { Text("Snackbar",style = MaterialTheme.typography.labelLarge) }
                            ListDividerPadding()


                             Text("Toast", Modifier.padding(bottom = 10.dp), style = MaterialTheme.typography.labelLarge)
                             Button(onClick = {
                                 Toast.makeText(
                                     context,
                                     "Hi i am toast message",
                                     Toast.LENGTH_LONG
                                 ).show()
                             }) { Text("Toast",style = MaterialTheme.typography.labelLarge) }


                        }
                    }
                )

                Box(modifier = Modifier.fillMaxSize(), Alignment.BottomCenter){
                    SnackbarHost(hostState = snackState)
                }

            }

        }
    }
}

Thracian · Accepted Answer · 2022-08-11T08:09:16.800

You can add SnackBar composable to SnackbarHost and change colors as

SnackbarHost(hostState = snackState) {
    Snackbar(
        snackbarData = it,
        containerColor = Color.Green,
        contentColor = Color.Red
    )
}

Edit

There is no overload function that takes Brush instead of Color but you can add another Composable as with gradient color or more customization via content: @Composable () -> Unit

@Composable
fun Snackbar(
    modifier: Modifier = Modifier,
    action: @Composable (() -> Unit)? = null,
    dismissAction: @Composable (() -> Unit)? = null,
    actionOnNewLine: Boolean = false,
    shape: Shape = SnackbarTokens.ContainerShape.toShape(),
    containerColor: Color = SnackbarTokens.ContainerColor.toColor(),
    contentColor: Color = SnackbarTokens.SupportingTextColor.toColor(),
    actionContentColor: Color = SnackbarTokens.ActionLabelTextColor.toColor(),
    dismissActionContentColor: Color = SnackbarTokens.IconColor.toColor(),
    content: @Composable () -> Unit
)

Can be used as

Snackbar {
    Row(
        modifier = Modifier.background(
            brush = Brush.horizontalGradient(
                listOf(
                    Color.Red,
                    Color.Green,
                    Color.Blue
                )
            )
        )
    ) {
        Text("Hello World")
    }
}

is there any way to set gradient color to "containerColor", plz help me — Bolt UIX, Aug 11 '22 at 08:00
That version only takes Color but there is another function you can change content or action as you wish — Thracian, Aug 11 '22 at 08:07

How to change background color of the jetpack compose snackbar?

1 Answers1

Edit