I’ve got a `Row` with `horizontalScroll`. All the ...

# compose

[Matti MK]

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

[Yves Kalume]

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

[Albert Chang]

Do not use Modifier.onGloballyPositioned(). See this. Instead, use intrinsic measurements.

[Matti MK]

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

[Albert Chang]

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.

[Matti MK]

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 😅

[Matti MK]

Thanks for the help 👍

[Chris Sinco [G]]

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

[Matti MK]

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.

[Chris Sinco [G]]

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..

[Matti MK]

I am applying the horizontalScroll to the Row as a fallback to be sure that nothing clips due to localisation, text sizes etc.

[Matti MK]

And due to that it’d be feasible to have all the cards with the same width, but of course that comes with the same caveats

[Colton Idle]

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.