Android Jetpack Compose – Set Content Color for Card

To set the content color for Card in Android Jetpack Compose, set contentColor parameter with the required Color value.

Set Content Color for Card in Android Compose

Example

In this example, we shall display a Card composable and set its content color with Blue.

Create a Project in Android Studio with Empty Compose Activity template, and modify MainActivity.kt file as shown in the following.

MainActivity.kt

</>
Copy
package com.example.myapplication

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.*
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight()
                        .padding(20.dp)) {
                    Card(
                        elevation = 4.dp,
                        contentColor = Color.Blue
                    ) {
                        Column(modifier = Modifier.padding(10.dp)) {
                            Text("AB CDE", fontWeight = FontWeight.W700)
                            Text("+0 12345678")
                            Text("XYZ city", fontWeight = FontWeight.W300)
                        }
                    }
                }
            }
        }
    }
}

Screenshot

Set Content Color for Card in Android Compose

If any of the composable inside the Card is set with its own color, then the color of that composable is not modified by the contentColor parameter of the Card.

In the following example, the content color of Card is set to Blue. Also, the color the third Text composable is set to Gray. In this case, the Text set with Gray color retains its color, while others take the color from contentColor of Card.

MainActivity.kt

</>
Copy
package com.example.myapplication

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.*
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight()
                        .padding(20.dp)) {
                    Card(
                        elevation = 4.dp,
                        contentColor = Color.Blue
                    ) {
                        Column(modifier = Modifier.padding(10.dp)) {
                            Text("AB CDE", fontWeight = FontWeight.W700)
                            Text("+0 12345678")
                            Text("XYZ city", color = Color.Gray, fontWeight = FontWeight.W300)
                        }
                    }
                }
            }
        }
    }
}

Screenshot

Set Content Color for Card in Android Compose

Conclusion

In this Android Jetpack Compose Tutorial, we learned how to set the content color for Card composable in Android Jetpack Compose.