easiest way of doing something like this in a row? ```----------------------------------------------...

# compose

[mgrazianodecastro]

easiest way of doing something like this in a row?

----------------------------------------------------
| A |                 | C |                        |
----------------------------------------------------

[mgrazianodecastro]

the cleanest solution I have is to use a Box instead and align based on it CenterStart for A, and Center for C

[ephemient]

Row {
    A()
    Spacer(modifier = Modifier.weight(1f))
    C()
    Spacer(modifier = Modifier.weight(1f)
}

[ephemient]

(C will be centered between the end of A and the end of the row, which is a bit different than being centered in the row; not sure if that's what you want)

[mgrazianodecastro]

it would be centered on the whole row

[Marco Pierucci]

Cant you use horizontalArrangement = Arrangement.SpaceBetween and add a third empty composable ( like a box or something)?

[ephemient]

even if it overlaps with A? then your current Box solution is fine

[mgrazianodecastro]

good catch. Because of the screen size constraint, I think it would never happen

[mgrazianodecastro]

@Marco Pierucci lemme try it

[ephemient]

that would have the same effect as the two spacers

[mgrazianodecastro]

yeah, it doesn't achieve that. Oh well, I think the design of Row is intended to be like that, because of the catch @ephemient commented

[Francesc]

you can always create a custom layout, they're very easy to implement on compose

[mgrazianodecastro]

Yeah, they do seem to be the most general solution, but I always fell like avoiding custom layouts since they add a lot of code. But, I'm sure I eventually will not be able to escape the route 😅

[ephemient]

custom layouts aren't that much code

[ephemient]

for example, this will behave like Box(modifier = Modifier.fillMaxWidth()) { A(modifier = Modifier.align(Alignment.CenterStart)); B(modifier = Modifier.align(Alignment.Center)) }, but also prevent them from overlapping:

Layout(
    content = {
        A()
        B()
    },
    modifier = Modifier.fillMaxWidth(),
    measurePolicy = { measureables, constraints ->
        check(measureables.size == 2)
        val placeableA = measureables[0].measure(constraints.copy(minWidth = 0))
        val placeableB = measureables[1].measure(constraints.copy(minWidth = 0).offset(horizontal = -placeableA.width))
        val width = constraints.constrainWidth(placeableA.width + placeableB.width)
        val height = constraints.constrainHeight(maxOf(placeableA.height, placeableB.height))
        layout(width, height) {
            placeableA.placeRelative(0, (height - placeableA.height) / 2)
            placeableB.placeRelative(((width - placeableB.width) / 2).coerceAtLeast(placeableA.width), (height - placeableB.height) / 2)
        }
    }
)

[mgrazianodecastro]

yeah, I think I'm just lazy. It's probably because I'm already dealing with so many things in the work, so my instincts get scared to dive into custom layouts. Thanks for the example, I'm gonna use it as a starting point