I’ve got a

Row

with

horizontalScroll

. All the elements of the

Row

have a

Text

that can be of any width. I’d like to make all the elements of the Row to take up the same width as the largest element. Any tips on how to go about this? In the ConstraintLayout world something like this could be perhaps achieved with

Barrier

There is a 

onGloballyPositioned

 modifier :

var size by remember { mutableStateOf(IntSize.Zero) }

Box(Modifier.onGloballyPositioned { coordinates ->
    size = coordinates.size})
{
   //...
}

you can check that the size is the largest before using it on other composable

Do not use

Modifier.onGloballyPositioned()

. See this. Instead, use intrinsic measurements.

Thanks for the heads up 👍 Wondering about Intrinsic size, the example demonstrates the height scenario nicely in a row, however, I feel that having a horizontally scrollable

Row

where the widths of the children should be matched is a bit less trivial. Not quite sure on how to go about solving this: intrinsic height in the example certainly works well, but here I don’t wish to constrain the width of the root

Row

to any intrinsic width of the children

Oh sorry didn't notice that. In that case you can create a custom layout in which you query the intrinsic widths of all children and measure them with the largest width.

Yup, based on reading the docs that seems to be the smartest way. Looks like the measurements definitely need to be based the intrinsic width in order to be able to have an approximation of the widths before composition phase. A bit more work for later on 😅

Just curious - what is this UI for if you don't mind me asking?

This is for a customer service screen. The use case is to show different methods for contacting the CS with cards, these cards being inside a

Row

. The layout for each card is a

Column

with an Icon and a Text (e.g.

Call

). The UI ends up looking a bit funny if the cards’ widths are determined only by the length of the Text and as such I was exploring different options, with a fallback being to establish a reasonable minimum width for each card. Constraining the Text width and having multiline text is not an option, as it’d just move the problem to another axis.

I see. Though you probably would want a max width on the card since the text could make that card possibly wider than the screen itself? I think also there's a modifier for setting a min and max width. sizeIn I think..

I am applying the

horizontalScroll

to the

Row

as a fallback to be sure that nothing clips due to localisation, text sizes etc.

I have a similar ask to this, but I just want to have a carousel where each card is set to the height of the tallest card. I'm still working on it (like 2 months later). I think I have to ditch Pager though.