Transparent checkmark in checkBox in Jetpack Compose-CodePudding

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?

CodePudding user response：

I think you can achieve this by importing custom icon vector like this

Here, the check is transparent so, it will show the gradient background.

CodePudding user response：

You can find an appropriate default icons instead of drawing on your own. Icons.Default.CheckCircle is what you're looking for - it has transparent checkmark inside a filled circle. And you can use Icons.Outlined.Circle instead of border modifier:

@Composable
fun CircleCheckBox(
    isChecked: Boolean,
    modifier: Modifier = Modifier,
    onChecked: () -> Unit = {},
    color: Color,
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier
            .clip(CircleShape)
            .clickable { onChecked() }
    ) {
        Icon(
            imageVector = if (isChecked) Icons.Default.CheckCircle else Icons.Outlined.Circle,
            contentDescription = stringResource(R.string.icon_check),
            tint = color
        )
    }
}

Result: