CODEWITHSUNDEEP
android-jetpack-composeandroid-jetpackandroid-checkbox
Vahid Garousi
Vahid Garousi

Reputation: 715

how can we create a circular checkbox in jetpack compose?

It is usually possible to assign different shapes to a composable using a modifier, but this is not done in this composable.

I want the part marked in the image to be a circle

enter image description here

You can see the code I wrote below

@Composable
fun StandardCheckbox(
    text: String = "",
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
) {
    Row(
        Modifier.padding(horizontal = SpaceMedium)
    ) {
        Checkbox(
            modifier = Modifier
                .clip(CircleShape),
            checked = checked,
            onCheckedChange = onCheckedChange,
            enabled = true,
            colors = CheckboxDefaults.colors(
                checkedColor = MaterialTheme.colors.primary,
                checkmarkColor = MaterialTheme.colors.onPrimary,
                uncheckedColor = MaterialTheme.colors.onBackground.copy(alpha = 0.3f)
            )
        )
        Spacer(modifier = Modifier.width(SpaceSmall))
        Text(
            text = text,
            color = MaterialTheme.colors.primary,
            modifier = Modifier.clickable {
                if (onCheckedChange != null) {
                    onCheckedChange(!checked)
                }
            }
        )
    }
}

Upvotes: 4

Views: 5992

Answers (3)

Argus Waikhom
Argus Waikhom

Reputation: 607

@Composable
fun CircularCheckbox(
    modifier: Modifier = Modifier,
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit
) {
    Box(
        modifier = modifier
            .size(24.dp)
            .background(
                color = if (checked) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f),
                shape = CircleShape
            )
            .clickable { onCheckedChange(!checked) },
        contentAlignment = Alignment.Center
    ) {
        if (checked) {
            Icon(
                imageVector = Icons.Default.Check,
                contentDescription = null,
                tint = Color.White,
                modifier = Modifier.size(16.dp)
            )
        }
    }
}

Upvotes: 1

gaohomway
gaohomway

Reputation: 4100

In order to achieve a circular checkbox with a native experience, and retain the body color and click ripple effect, and keep it simple, IconButton is the best choice.


@Composable
fun CircleCheckbox(selected: Boolean, enabled: Boolean = true, onChecked: () -> Unit) {

    val color = MaterialTheme.colorScheme
    val imageVector = if (selected) Icons.Filled.CheckCircle else Icons.Outlined.Circle
    val tint = if (selected) color.primary.copy(alpha = 0.8f) else color.white.copy(alpha = 0.8f)
    val background = if (selected) color.white else Color.Transparent

    IconButton(onClick = { onChecked() },
        modifier = Modifier.offset(x = 4.dp, y = 4.dp),
        enabled = enabled) {
        
        Icon(imageVector = imageVector, tint = tint,
            modifier = Modifier.background(background, shape = CircleShape),
            contentDescription = "checkbox")
    }
}

enter image description here

Upvotes: 10

S Haque
S Haque

Reputation: 7281

The code below is from CheckboxImpl composable

Canvas(modifier.wrapContentSize(Alignment.Center).requiredSize(CheckboxSize)) {
    val strokeWidthPx = floor(StrokeWidth.toPx())
    drawBox(
        boxColor = boxColor,
        borderColor = borderColor,
        radius = RadiusSize.toPx(),
        strokeWidth = strokeWidthPx
    )
    drawCheck(
        checkColor = checkColor,
        checkFraction = checkDrawFraction,
        crossCenterGravitation = checkCenterGravitationShiftFraction,
        strokeWidthPx = strokeWidthPx,
        drawingCache = checkCache
    )
}

drawBox will always draw a rounded rectangle. It can't be be customised.

To implement the circular checkbox you need to write a custom Composable and draw Circle instead of Rectangle. You can use RadioButton and CheckboxImpl composable as reference.

Upvotes: 8

Related Questions