How to change the border color of a card, on card click in Jetpack Compose?

August 12, 2022

I have list of users that is displayed in a lazy row. Each row is represented by a card. Each card has a red border. How can I change the border of the card from red to black, on card click?

Here is what I have tried:

LazyRow(
    modifier = Modifier.fillMaxWidth()
) {
    items(users) { user ->
        UserCard(
            name = user.name
        )
    }
}

And here is the card:

fun UserCard(
    name: String
) {
    Card(
        modifier = Modifier.fillMaxWidth()
        border = BorderStroke(2.dp, Color.Red),
        onClick = { ??? }
    ) {
        Text(
            text = name
        )
    }
}

>Solution :

You can use something like:

var cardColor by remember { mutableStateOf(Red)}

Card(
    //..
    border = BorderStroke(2.dp, cardColor),
    onClick = { cardColor = Blue }
) {
    Text(
        text = "name"
    )
}

If you want to handle a selected state you can use something like:

var selectedCard by remember { mutableStateOf(false)}
var cardColor = if (selectedCard) Red else Black

Card(
    border = BorderStroke(2.dp, cardColor),
    onClick = { selectedCard = !selectedCard }
) {
    Text(
        text = "name"
    )
}