How to give a Box a CircleShaped stroke?

Question

So this is how i ended up giving my jetpack Compose box a rounded circle shape

Box(modifier = Modifier
    .size(32.dp)
    .clip(CircleShape)
    .border(BorderStroke(2.dp, Color.Red), CircleShape)
    ){

  }

As you can see , CircleShape is mentioned twice in the modifier chain . It feels as if there has got to be a better way to do this .

Any ideas?

Answer 1

Modifier.clip is needed if you are supposed chain background, pointerInput(clickable also a pointerInput), graphicsLayer or any Modifier that requires current layer of your Composable. Modifier.clip() is Modifier.graphicsLayer{clip =true shape=shape} and layer effects physical presence sort of, order of Modifier.graphics also define how your Composable behaves.

On the other hand Modifier.border() is a DrawModifier which has no effect on physical presence of you Composable

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(20.dp)
) {
    Text("Box with Clip and no border shape")
    Box(
        modifier = Modifier
            .clip(CircleShape)
            .border(3.dp, Color.Red)
            .size(100.dp)
            .background(Color.Yellow)
            .clickable { }

    )

    Text("Box with no clip")
    Box(
        modifier = Modifier
            .border(3.dp, Color.Red, CircleShape)
            .size(100.dp)
            .background(Color.Yellow)
            .clickable { }

    )

    Text("Box with  clip and border with shape")
    Box(
        modifier = Modifier
            .clip(CircleShape)
            .border(3.dp, Color.Red, CircleShape)
            .size(100.dp)
            .background(Color.Yellow)
            .clickable { }

    )
}