Is there a way to fix this I ve tried clipping not clipping

Question

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 ```

Albert Chang · Answer

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

Aaron Yoder · Answer

It s not just because it s the same as the corner

Aaron Yoder · Answer

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

Aaron Yoder · Answer

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

Albert Chang · Answer

You need to understand that the corner size you specified is the corner size of the outside instead of inside

Aaron Yoder · Answer

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

Aaron Yoder · Answer

This color leakage issue happens regardless of how thick the border stroke is

Aaron Yoder · Answer

It seems related to this <https kotlinlang slack com archives C01D6HTPATV p1616881676260300 thread ts=1616348711 105600 amp cid=C01D6HTPATV>

Aaron Yoder · Answer

Aaron Yoder · Answer

If I am misunderstanding something fundamental here then please let me know but it does not appear that this issue is fixed

Dragos Rachieru · Answer

try using `Surface` instead of `Box` and pass the border and shape to the `Surface` instead of the `Modifier`

Albert Chang · Answer

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

Albert Chang · Answer

`Surface` shouldn t be different

Dragos Rachieru · Answer

for me it looks like it s a problem with the order of modifiers

Dragos Rachieru · Answer

try again with `clip` called before `background` and `border`

Aaron Yoder · Answer

Surface is indeed not any different

Aaron Yoder · Answer

`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

Aaron Yoder · Answer

``` 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 ```

Aaron Yoder · Answer

That s about as simple an example as I can make other than getting rid of height and width modifiers

Aaron Yoder · Answer

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

Aaron Yoder · Answer

Not sure if I should ping people but this seems relevant to < Nader Jawad> and < orangy>

orangy · Answer

I didn t touch Compose for a while because I m currently focused on different things in my work slightly smiling face 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

Nader Jawad · Answer

I think this is a known rounding issue tracked here <https issuetracker google com issues 222551625|https issuetracker google com issues 222551625> Recommended workaround would dbe to add padding for the background composable to inset it slightly