how would I only center the checkbox, the "Test" t...

# compose

[Jan]

how would I only center the checkbox, the "Test" text and the delete icon, and the date comes under? Currently the text and the date are in a column which is in a Row with the other components

[Kirill Grouchnikov]

verticalAlignment = Alignment.CenterVertically on your row

[Jan]

yes I'm using that currently, but I want the checkbox, text and the delete button to be on one row and the date should be directly under the text but not with the others in a row

[Francesc]

what's the reason for wanting the date to be in its own container, separate from the others?

[Jan]

I just thought it looks better when the date is like this:
- - -
-

Instead of

- = -

Maybe its just me

[Francesc]

it looks to me that the 2 text rows are linked in that their position depends on one another, so placing the date outside the row would only complicate things for no actual gain

[Jan]

okay well thanks

[Francesc]

there is a default composable for this kind of thing, List something that you may be able to reuse rather than making your own

[Francesc]

https://www.composables.com/components/material3/listitem

[Travis Griggs]

@Jan, do you have your original composable for that row you can share?

[Zach Klippenstein (he/him) [MOD]]

You could use alignment lines, but it would take a custom layout since afaik checkbox doesn’t define any. And if you’re doing a custom layout just for this, probably easier to just hard code the layout logic

[dewildte]

Row { leadingContent(); Column(modifier = Modifier.weight(1)) { content() }; trailingContent() }

[dewildte]

Or you could use a box with constraints.

[Zach Klippenstein (he/him) [MOD]]

No please don’t, it’s WAY more expensive

[Travis Griggs]

I'm a n00b around here. Small diatribe.

I've been coding for many moons (just not in this neck of the woods) and one of my favorite adages is the "Make it Work, Make it Right, Make it Fast (Optimal)" adage. While accomplishing the first goal is often good enough and minimizes overall risk (especially in a "ticket driven" development world), it's actually where the least amount of learning happens. So while @Jan’s request may not fit the "right" bill, I often learn the most when people entertain answers to what are even bad ideas. I've learned today that BoxWithConstraints apparently has performance issues, and that alignment lines apparently don't work for checkboxes (for now?)

So here's my solution:

@Composable
fun LowHungItem(label: String, timestamp: Instant, modifer: Modifier = Modifier) {
   Row(modifier = modifer, verticalAlignment = Alignment.CenterVertically) {
      Checkbox(checked = true, onCheckedChange = {}, modifier = Modifier)
      Column(modifier = Modifier.weight(1f)) {
         Text(text = "X", modifier = Modifier.alpha(0f), fontSize = 10.sp)
         Text(text = label, fontSize = 20.sp)
         Text(text = "${timestamp}", fontSize = 10.sp)
      }
      Icon(Icons.Outlined.Delete, null)
   }
}

@Preview(showBackground = true)
@Composable
private fun LowHungItemPreview() {
   PlansDemoTheme {
      LowHungItem("Test", Clock.System.now(), modifer = Modifier.fillMaxWidth())
   }
}

This works (I think). It looks like what was asked for. But it's obviously a long way away from Right(tm)

[Zach Klippenstein (he/him) [MOD]]

BoxWithConstraints is almost always the wrong solution for anything. For this case it’s going to also make you try to express the layout with a combination of offset modifiers or something that will probably end up being a lot messier than just writing a simple custom layout

[xoangon]

Yeah, BoxWithConstraints shouldn't be taken as the first choice for performance reasons. I would defikitely start by thinking if that design makes real sense. If that is the case, you could consider a ConstraintLayout with guidelines.

Do you find any performance gotvhas for this approach @Zach Klippenstein (he/him) [MOD]?

[Zach Klippenstein (he/him) [MOD]]

I would avoid ConstraintLayout too here since, again, a custom layout is going to be pretty straightforward for this case I think. Currently CL also relies on an internal api to do multiple measures, which makes it more expensive than most compose layouts (which otherwise forbid multiple measures)

[xoangon]

That makes sense to me 👍🏻 , I'd also stick with a custom layout then

[dewildte]

So earlier I said this:

Or you could use a box with constraints.

Let me restate this to be more clear.

Or you could make an absolute mess of a layout with bad performance to achieve something small.

That’s all….thank you.