https://kotlinlang.org logo
#compose-desktop
Title
# compose-desktop
z

Zoff

03/01/2024, 4:27 PM
i have 2 iconbuttons.
Copy code
IconButton(
    modifier = Modifier.size(MESSAGE_CHECKMARKS_CONTAINER_SIZE)
        .align(Alignment.Bottom)
        .background(Color.Transparent, CircleShape),
    icon = Icons.Filled.Check,
    iconTint = color1,
    enabled = false,
    iconSize = MESSAGE_CHECKMARKS_ICON_SIZE,
    contentDescription = "Message delivered",
    onClick = {}
)
and a second one right next to it. but there is a lot of space between which does not look like i want it: can i put them closer together? or sort of overlap them a bit. so that the check marks are really close to each other. without actually making an svg image for it?
i

Ivan Matkov

03/01/2024, 4:36 PM
quick and dirty -
Modifier.offset(x = -10.dp)
s

seb

03/01/2024, 4:57 PM
If you want to have one singular button with two checkmarks, I would recommend creating a dedicated icon. This way you can also do things like making the two ticks have some minimum empty gap between each other, etc. If you insist on not wanting a new SVG asset, the least worst approach is this:
Copy code
IconButton(modifier = Modifier.size(MESSAGE_CHECKMARKS_CONTAINER_SIZE), onClick = { /* doSomething() */ }) {
  Box {
    Icon(Icons.Filled.Check, contentDescription = "Message delivered")
    Icon(Icons.Filled.Check, contentDescription = null, Modifier.padding(start = 4.dp)) // or whatever
  }
}
This way it's one single button instead of two overlapping ones, which would look super weird. There can be clipping/alignment issues depending on the icons you use, and it's generally just not a great idea.
👍 1
z

Zoff

03/01/2024, 9:29 PM
nice. i will try that
that worked like a charm. thanks
🙌 1