androidandroid-jetpack-composeandroid-snackbarandroid-jetpack-compose-material3

How to change background color of the jetpack compose snackbar?


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)
                }

            }

        }
    }
}

Solution

  • 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")
        }
    }