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

robercoding

01/19/2023, 8:05 AM
Does anyone know why there's a small white line padding here when I'm dimming and scaling the
Box
? I have a background
Box
with
Color.Black.copy(0.5f)
and another
Box
on top of it with
Color.White
and some more padding. (Acting like a Card) When I click on the top box: It scales out to
0.7f
and dim with the same color value as the background box (
Color.Black.copy(0.5f)
) and seems like there's a white line separating both components, like the background doesn't fill the whole "Top box" I'm attaching a video and a sample project in the 🧵 Edit: "Partially solved" - add
.border(0.dp, dimOverlay)
😅
white-line-box.mp4
IssueTrackerWhitePadding.zip
I haven't submitted anything yet to the issue tracker because I don't know if it's my fault or Compose
Ahh.. It seems that it also happens with pure Black color.
Aha but if I don't scale then this doesn't happen 🤔
So doing some tricks I see it works, but of course this solution CAN'T BE APPLIED to all the devices instead of
drawRect(cardOverlay)
use:
Copy code
drawRect(cardOverlay, topLeft = Offset(-0.2f, -0.5f),size = Size(this.size.width + 0.5f, this.size.height + 1))
Looks like something is wrong when drawing again after scaling it
If I don't use
scale
method and instead use
width(((screenWidthDp - 24.dp) * scaleValue).dp)
And the same for height, it doesn't show any white line. Of course I want to also scale the children so it's not a good option
Would be nice if someone from Compose team could tell me if I'm doing something wrong or if the scaling is not behaving as expected
Alright so not sure how I didn't think of it before but just add:
.border(0.dp, dimOverlay)
You can still spot the border, but looking better than before 🙂 Looks like border is still applied even though you set it to 0
And if you add some elevation , it kinda makes up that border and fits nicely I'm not happy with the result but can't find a better solution 😅
6 Views