https://kotlinlang.org logo
#compose
Title
# compose
d

dewildte

11/07/2023, 8:55 PM
Is there anything we can do about the
Modifier.border
antialiasing when using the circle shape? I get this subtle ring around the image. Example in 🧵
For example:
Code used:
Copy code
val avatarModifier = modifier
            .clip(CircleShape)
            .size(avatarSize)
            .border(style.borderSize, color = style.borderColor ?: Color.Transparent, shape = CircleShape)
a

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
d

dewildte

11/07/2023, 9:26 PM
Thanks a ton @annsofi! Sadly no fix has been made for this.
t

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