how to make Jetpack compose checkbox rounded

Question

How do I create a rounded checkbox in Jetpackcompose like this . I tried using a Shape composable on it but it doesn't work.

Answer 1

I was looking on how to do the same thing you were asking, your question helped me on my journey so it is only fair I share. Add some animations and you are set my friend.

1. Make a round looking icon by using a box and an icon

    Box( modifier = Modifier.clip(CircleShape).size(40.dp).background(Color.Black).padding(3.dp).clip(CircleShape).background(Color.White), contentAlignment = Alignment.Center ) { Icon(imageVector = Icons.Default.Check, contentDescription = "") }

2.Place the newly made rounded icon and some text next to each other by using a Row

 Row(
    verticalAlignment = Alignment.CenterVertically,
    ){
    Box(
         modifier = Modifier
             .clip(CircleShape)
             .size(40.dp)
             .background(Color.Black)
             .padding(3.dp)
             .clip(CircleShape)
             .background(Color.White),
         contentAlignment = Alignment.Center
     ) {
         
       Icon(imageVector = Icons.Default.Check, contentDescription = "")
      }

    Text(
        text = checkedText.value,
        color = color.value,
        fontSize = 20.sp,
        fontWeight = FontWeight.Medium,
        modifier = Modifier.padding(start = 5.dp)
    )
}

3.Replace whatever you want with variables so you can customize it

@Composable
fun RoundedCheckView(
) {

val isChecked = remember { mutableStateOf(false) }
val checkedText = remember { mutableStateOf("unChecked") }
val circleSize = remember { mutableStateOf(20.dp) }
val circleThickness = remember { mutableStateOf(2.dp) }
val color = remember { mutableStateOf(Color.Gray) }

Row(
    verticalAlignment = Alignment.CenterVertically,
    {
    Box(
        modifier = Modifier
            .clip(CircleShape)
            .size(circleSize.value)
            .background(color.value)
            .padding(circleThickness.value)
            .clip(CircleShape)
            .background(Color.White)  ,
        contentAlignment = Alignment.Center
    ) {
       Icon(imageVector = Icons.Default.Check, contentDescription = "")
     }

    Text(
        text = checkedText.value,
        color = color.value,
        fontSize = 20.sp,
        fontWeight = FontWeight.Medium,
        modifier = Modifier.padding(start = 5.dp)
    )
}

}

4.Finally add Modifier.toggleable to the row, basically making it a clickable item that toggles (between true and false) a variable in this case isChecked. Then just customize the variables according to what you need

@Composable

fun RoundedCheckView() 
{
    val isChecked = remember { mutableStateOf(false) }
    val checkedText = remember { mutableStateOf("unChecked") }
    val circleSize = remember { mutableStateOf(20.dp) }
    val circleThickness = remember { mutableStateOf(2.dp) }
    val color = remember { mutableStateOf(Color.Gray) }
Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
        .toggleable(value = isChecked.value,role = Role.Checkbox) {
            isChecked.value = it

            if (isChecked.value) {
                checkedText.value = "Checked"
                circleSize.value = 40.dp
                circleThickness.value = 3.dp
                color.value = Color.Black
            } else {
                checkedText.value = "unChecked"
                circleSize.value = 20.dp
                circleThickness.value = 2.dp
                color.value = Color.Gray
            }
        }) {
    Box(
        modifier = Modifier
            .clip(CircleShape)
            .size(circleSize.value)
            .background(color.value)
            .padding(circleThickness.value)
            .clip(CircleShape)
            .background(Color.White)  ,
        contentAlignment = Alignment.Center
    ) {
        if(isChecked.value){
            Icon(imageVector = Icons.Default.Check, contentDescription = "")
        }
     }

    Text(
        text = checkedText.value,
        color = color.value,
        fontSize = 20.sp,
        fontWeight = FontWeight.Medium,
        modifier = Modifier.padding(start = 5.dp)
    )
}

}

Answer 2

You can try to make it use Box with modifier content alignment center. and put an icon on there.

@Preview
@Composable
fun Check() {
    Box(
        modifier = Modifier
            .clip(CircleShape)
            .size(50.dp)
            .background(Color.Red)
            .padding(5.dp)
            .clip(CircleShape)
            .background(Color.Blue),
        contentAlignment = Alignment.Center
    ) {
        Icon(imageVector = Icons.Default.Check, contentDescription = "")
    }
}

Answer 3

This is how we can make a custom check box in jetpack compose

val isCheck = remember { mutableStateOf(false) }

    Row {
        Card(
            modifier = Modifier.background(Color.White),
            elevation = 0.dp,
            shape = RoundedCornerShape(6.dp),
            border = BorderStroke(1.5.dp, color = titleColor)
        ) {
            Box(
                modifier = Modifier
                    .size(25.dp)
                    .background(if (isCheck.value) titleColor else Color.White)
                    .clickable {
                        isCheck.value = !isCheck.value
                    },
                contentAlignment = Center
            ) {
                 if(isCheck.value)
                    Icon(Icons.Default.Check, contentDescription = "", tint = Color.White)
            }
        }

        Text(
            modifier = Modifier
                .align(CenterVertically)
                .padding(start = 10.dp),
            text = "I agree with the terms & condition",
        )
    }