Is there anything we can do about the `Modifier border` anti kotlinlang #compose

val avatarModifier = modifier
            .clip(CircleShape)
            .size(avatarSize)
            .border(style.borderSize, color = style.borderColor ?: Color.Transparent, shape = CircleShape)

annsofi

11/07/2023, 8:58 PM

The only workaround I’ve seen is to add a 1.dp padding before adding the border (I think, let me find the bug report I saw this in again)

This is the one I was thinking of: https://issuetracker.google.com/issues/228985905

I don’t think the problem is just for surface though because I’ve seen the same thing as you do

dewildte

11/07/2023, 9:26 PM

Thanks a ton @annsofi! Sadly no fix has been made for this.

Tobias Suchalla

11/08/2023, 6:44 AM

The order of your modifiers matters since in this order you are clipping your circle border. If you specify the border first, only the content gets clipped (which is fine since your border already is a circle). The difference is subtle but might be worth looking into:

Copy code

fun test() = singleWindowApplication {
    MaterialTheme {
        Box(Modifier.fillMaxSize(), Alignment.Center) {
            Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
                Box(
                    Modifier
                        .clip(CircleShape)
                        .size(48.dp)
                        .border(1.dp, Color.Red, CircleShape)
                )

                Box(
                    Modifier
                        .border(1.dp, Color.Red, CircleShape)
                        .clip(CircleShape)
                        .size(48.dp)
                )
            }
        }
    }
}

Which produces the attached circles (second image shows the difference).

☝️ 1