Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

            }

        }
    }
}

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

You can add SnackBar composable to SnackbarHost and change colors as

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading