What would be the best way to get the "Container Color" and "Content Color" `Text` aligned over the ...

# compose

[eygraber]

What would be the best way to get the "Container Color" and "Content Color" Text aligned over the "TertiaryContainer" and "Primary" TextButton?

Currently I have it implemented as a Column of 3 Rows . I use an onPlaced modifier on the first "TertiaryContainer" and "Primary" and use the resulting LayoutCoordinates.positionInParent().x to set an offset modifier for "Container Color" and "Content Color". I tried using a grid but it splits the column size equally to match the GridCells.Fixed

[andrew]

Is this for a design system?

[andrew]

Or do you mean getting the actual values to be printed?

[eygraber]

To achieve the UI in that screenshot (which is using the onPlaced / offset approach that I described).

It's a tool I'm building for my design team so they can play around with using different tokens for different components and get real time feedback

[andrew]

Ah, in that case I would think the data would describe it, as opposed to using placement APIs

[eygraber]

I think we're not on the same page.

This is a screen that I'm building now. I want to align the "Container Color" and "Content Color" Text so that they are directly over the "TertiaryContainer" and "Primary" TextButtons .

If I remove the offset modifier, it looks like this

[andrew]

Ah, I see

[Colton Idle]

this example makes my head hurt. lol
i tried to make something in my little playground app here, but I don't quite think i understand everything. got maybe a simpler code snippet to share, pretty please 😬

[andrew]

This is something that you might want to just make a custom layout for

[eygraber]

Trying out a custom layout. I'll share a gist when I'm done. Seems to be a lot more work, but less of a hacky feel then the offsets (even though it's essentially doing the same thing, and also recreating Row and Column behavior 😱 )

[andrew]

You can still reuse row/column by manually creating those layouts and letting your slots be scoped to the row/column scope

[eygraber]

How would that work? The main thing I need is the "View All Test Results" button's placeable so that I could use its width to define the x for the "ContainerColor"

[andrew]

You would get the width of the overall column it's in

[eygraber]

Good point!

I implemented it as a Column of Rows. Forgot that I could also do a Row of Columns 😅

[eygraber]

Here's what I ended up with. It was fun, but was a lot to deal with. I ended up not using Row or Column as an exercise. Not sure if I'll end up using this implementation in my app but I'm glad I have a reference to look back at.

Untitled.kt