How to handle border and background in compose shape?-CodePudding

In the code the image border only on the sides, not on the corners. for the button, the background goes out of the shape/border. I only managed to "fix" the button by using a fixed height but I don't understand why a fixed height help and I wonder if there is another way to do this.

@Composable
fun Test(){
    Column(modifier = Modifier.padding(5.dp)) {
        Image(
            painter = painterResource(id = R.drawable.ic_close),
            contentDescription = null,
            modifier = Modifier
                .clip(CircleShape)
                .border(1.dp, Color.Red)
                .size(20.dp)
        )
        OutlinedButton(
            onClick = {  },
            border = BorderStroke(1.dp, Color.Red),
            shape = RoundedCornerShape(5.dp),
            modifier = Modifier
                .clip(RoundedCornerShape(5.dp))
                .fillMaxWidth()
                .background(Color.Green)
        ) {}
    }
}

CodePudding user response：

For the Image, remove the clip modifier and use the shape inside the border parameter:

    Image(
        painter = painterResource(id = R.drawable.ic_xxx),
        contentDescription = null,
        modifier = Modifier
            //.clip(CircleShape)
            .border(1.dp, Color.Red, CircleShape)
            .size(20.dp)
    )

For the OutlinedButton use the colors attribute to assign the background color instead of the Modifier.background

    OutlinedButton(
        onClick = {  },
        border = BorderStroke(1.dp, Color.Red),
        shape = RoundedCornerShape(5.dp),
        modifier = Modifier
            //.clip(RoundedCornerShape(5.dp))
            .fillMaxWidth(),
            //.background(Color.Green),
        colors = ButtonDefaults.outlinedButtonColors(backgroundColor = Green),
    )