CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-material3
Bolt UIX
Bolt UIX

Reputation: 7012

How to set Background Color for Material3 Card in Android Compose?

I try to set the background color for the Material3 Card in Android Jetpack Compose, using the backgroundColor parameter.

implementation 'androidx.compose.material3:material3:1.0.0-alpha14'

// * Card with background color argument
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                //set background color of the card
                backgroundColor = Color.Gray,
                content = {
                    Text("Card with background color argument", modifier = Modifier.padding(16.dp),style = MaterialTheme.typography.labelLarge)
                }
            )

i got error message : Cannot find a parameter with this name: backgroundColor enter image description here

Upvotes: 36

Views: 36943

Answers (3)

BollMose
BollMose

Reputation: 3498

The upside & downside of Material design are here. If all cards background color is gray, you only need set

surfaceVariant = Color.Gray,

If need to set a specific background color to a card use Code Poet's answer or sdk document

Upvotes: 4

Antonio J. Morales
Antonio J. Morales

Reputation: 216

Other way to do this:

Card(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    
    colors = CardDefaults.cardColors(
        containerColor = Color.DarkGray, //Card background color
        contentColor = Color.White  //Card content color,e.g.text
    )
  )

Upvotes: 14

Code Poet
Code Poet

Reputation: 7965

You can do it like this:

Card(
    onClick = {},
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surfaceVariant,
    ),
    modifier = Modifier.fillMaxWidth()
)

You don't need to go through the modifier, just use containerColor.

Upvotes: 85

Related Questions