I was watching the live stream of <@U2UJXRF0W> and...

# compose

[Colton Idle]

I was watching the live stream of @zsmb and @Sebastian Aigner building the kotlin conf app. They were building a toggle and what they ended up building intially matched what I would have done as well. Why did the artifacting occur around the "thumb"?

Box (contentAlignment = Alignment.Center) {
  Box (Modifier. size(width = 28.dp, height = 16. dp)
      .clip(ToggleBackgroundShape)
      .background (toggleColor)
  Box (Modifier.align(if (enabled) Alignment.CenterEnd else Alignment.CenterStart
      .border (width = 2. dp, color = toggleColor, shape = ToggleThumbShape)
      .clip (ToggleBackgroundShape)
      .size (18/. dp)
      .background(KotlinConfTheme.colors.mainBackground)
}

[Stylianos Gakis]

The code gremlins

[romainguy]

It's a known issue with how borders are implemented.

[romainguy]

I would myself not using the first Box but just draw a rounded rect background

[romainguy]

Not sure why the second clip is needed as well

[Stylianos Gakis]

If I recall from the stream itself, there was a need for the clip so that the click indicator would be properly constrained to inside the toggle component itself.
These two boxes were individually clickable, and they shared the same MutableInteractionSource so that both would show the ripple effect in-sync when one or the other was clicked.

[zsmb]

Here's the current code btw https://github.com/JetBrains/kotlinconf-app/blob/kotlinconf-2025/ui-components/src[…]monMain/kotlin/org/jetbrains/kotlinconf/ui/components/Toggle.kt

[romainguy]

Ah right i always forget about the interaction indicator :/

[Colton Idle]

let me know if theres an issuetracker to star. lol. the implementation went over my head once they resolved it. its the first time i saw .wrapContentSize(unbounded = true)` used lol

[zsmb]

Thanks for the tip about that in the stream chat by the way, @Stylianos Gakis!

I've had to use it again earlier today, to keep an icon in its designed position (at 24dp size) while actually increasing its tappable size to 48dp for accessibility:

.size(24.dp)
.wrapContentSize(unbounded = true)
.selectable(
    selected = bookmarked,
    onClick = { onBookmark(!bookmarked) },
    role = Role.Checkbox,
    indication = null,
    interactionSource = null,
)
.padding(12.dp),

[Colton Idle]

keep an icon in its designed position (at 24dp size) while actually increasing its tappable size to 48dp for accessibility:

i thought if you just size something to 24 and then add 12.dp padding, then that would equate to a 48.dp touch target if you added a clickable modifier?

also. (maybe you already know Marton, but it was TIL for me a few months ago) but apparently compose internally will make sure all clickables are 48.dp even if it doesn't look like it.

[zsmb]

I think it was necessary here, but I'll show it on the next stream and we can test it 😀

[Colton Idle]

already book marked. was fun to actually catch one of these.

[Stylianos Gakis]

How about just dropping the border then https://github.com/JetBrains/kotlinconf-app/pull/195 and flipping it around, having the thumb have the right color, and only draw a circle inside with the color that the thumb used to be.
This should avoid any such artifacts if the problem stems from the .border() modifier.

[Colton Idle]

Oh snap! I remember this issue reminded me of something. I just dug up https://kotlinlang.slack.com/archives/CJLTWPH7S/p1699740937332229

[Colton Idle]

let me try to read through what the actual solution there was.

[Mofe Ejegi]

I recall I stopped using borders at some point because of this and ended up drawing two similar shapes with their difference in size representing what would be the border width