samedi 1 janvier 2022

Transparent checkmark in checkBox in Jetpack Compose

In my Compose app I need to create a circle checkboxes. I've already achieved that with the code below:

@Composable
fun CircleCheckBox(
    isChecked: Boolean,
    modifier: Modifier = Modifier,
    onChecked: () -> Unit = {},
    checkedBackgroundColor: Color,
    unCheckedBackgroundColor: Color,
    checkedIconColor: Color,
    unCheckedIconColor: Color
) {
    Box(
        modifier = modifier
            .clip(CircleShape)
            .clickable { onChecked() }
            .border(
                width = if (!isChecked) 1.dp else 0.dp,
                color = if (!isChecked) checkedBackgroundColor else Color.Transparent,
                shape = CircleShape
            )
            .background(
                color = if (isChecked) checkedBackgroundColor else unCheckedBackgroundColor,
                shape = CircleShape
            ),
        contentAlignment = Alignment.Center
    ) {
        Icon(
            imageVector = Icons.Default.Check,
            contentDescription = stringResource(R.string.icon_check),
            modifier = Modifier.padding(3.dp),
            tint = if (isChecked) checkedIconColor else unCheckedIconColor
        )
    }
}

But in my app I have a gradient backgrounds on cards, so I want to make checkmarks transparent, but in this realization it's impossible because of the background of the Box. Is there any way to achieve it, like on image below?

Checkboxes example

Checkboxes example 2




Aucun commentaire:

Enregistrer un commentaire