https://kotlinlang.org logo
Join Slack
Powered by
Is there a way to fix this? I've tried clipping, n...
# compose-desktop
a
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.
Copy code
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
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
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
You need to understand that the corner size you specified is the corner size of the outside instead of inside.
a
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.
message has been deleted
If I am misunderstanding something fundamental here then please let me know, but it does not appear that this issue is fixed.
d
try using 
Surface
instead of 
Box
and pass the border and shape to the 
Surface
instead of the 
Modifier
a
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
for me, it looks like it's a problem with the order of modifiers
try again with 
clip
called before 
background
and 
border
a
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
Copy code
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:
Copy code
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
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
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
2 Views
Open in Slack
PreviousNext
Powered by