https://kotlinlang.org logo
Title
a

Aaron Yoder

06/02/2022, 10:19 AM
Is there a way to fix this? I've tried clipping, not clipping, nothing seems to work. The background color is leaking out the corners of the border. Also tried clipToBounds(). Using version 1.1.1.
Box(
    modifier = Modifier.height(48.dp)
        .fillMaxWidth()
        .background(color = backgroundColor, shape = RoundedCornerShape(4.dp))
        .border(border = if(selected) BorderStroke(4.dp, Color.Black) else BorderStroke(0.dp, Color.Transparent), shape = RoundedCornerShape(4.dp))
        .clip(RoundedCornerShape(4.dp))
        .selectable(selected = selected, onClick = { onClick.invoke(index) }),
    contentAlignment = Alignment.Center
)
a

Albert Chang

06/02/2022, 12:03 PM
I think this is expected because your corner size is the same as the border width. If you want the inner shape to be rounded, you should use a corner size of
innerCornerSize + borderWidth
. For example in your case if you want the background color to have a corner size of 4dp, you should set a corner size of 8dp.
a

Aaron Yoder

06/02/2022, 12:12 PM
It's not just because it's the same as the corner
Technically in the case you've given me, it "fixes" it, but only because the border radius becomes sharper than the item corner radius, so it covers the problem. That's not a real fix.
What I want to happen is that it simply adds the border around the outside with exactly the same shape as the item itself. That would mean a corner radius of x.dp and a border corner radius of x.dp.
a

Albert Chang

06/02/2022, 12:19 PM
You need to understand that the corner size you specified is the corner size of the outside instead of inside.
a

Aaron Yoder

06/02/2022, 12:23 PM
I am not even fully sure what you are saying now. There are two corner sizes. One for the box, and one for the border. The border goes over top of the box. If the border corner radius matches the box corner radius, they are the exact same shape, and the border should go around the outside of the box.
This color leakage issue happens regardless of how thick the border stroke is.
If I am misunderstanding something fundamental here then please let me know, but it does not appear that this issue is fixed.
d

Dragos Rachieru

06/02/2022, 12:42 PM
try using
Surface
instead of
Box
and pass the border and shape to the
Surface
instead of the
Modifier
a

Albert Chang

06/02/2022, 12:42 PM
Ok I think I misunderstood your question. Maybe you can use something like
Modifier.border().padding(1.dp).background()
to shrink the background a little bit.
Surface
shouldn’t be different.
d

Dragos Rachieru

06/02/2022, 12:43 PM
for me, it looks like it's a problem with the order of modifiers
try again with
clip
called before
background
and
border
a

Aaron Yoder

06/02/2022, 12:46 PM
Surface is indeed not any different.
clip
appears to do nothing whether it's there or not, other than clip the indication. I moved it before as you said, no change. Not having
clip
at all is also no change.
😔 1
Box(
        modifier = Modifier.height(48.dp)
            .fillMaxWidth()
            .background(color = backgroundColor, shape = RoundedCornerShape(4.dp))
            .border(border = BorderStroke(4.dp, Color.Black), shape = RoundedCornerShape(4.dp))
    )
That's about as simple an example as I can make, other than getting rid of height and width modifiers.
For my specific use-case, this is an extremely hacky workaround:
Box(
        modifier = Modifier.height(48.dp)
            .fillMaxWidth()
            .background(color = backgroundColor, shape = if(selected) RoundedCornerShape(6.dp) else RoundedCornerShape(4.dp))
            .border(border = borderStroke, shape = RoundedCornerShape(4.dp))
            .clip(RoundedCornerShape(4.dp))
            .selectable(selected = selected, onClick = { onClick.invoke(index) }),
        contentAlignment = Alignment.Center
    )
But definitely a bit silly.
Not sure if I should ping people but this seems relevant to @Nader Jawad and @orangy
o

orangy

06/02/2022, 1:16 PM
I didn’t touch Compose for a while because I’m currently focused on different things in my work 🙂 I didn’t verify the fix, so I can’t tell if it’s fixed or not. Back then I implemented my own Button with a different way of drawing backgrounds and borders (rounded or not), which fixed it for me, so I really didn’t have a need to check the changes
n

Nader Jawad

06/30/2022, 12:42 AM
I think this is a known rounding issue tracked here https://issuetracker.google.com/issues/222551625 Recommended workaround would dbe to add padding for the background composable to inset it slightly.
👀 1