:android-wave: Is it somehow possible to constrain...

# compose

[Jonas]

👋 Is it somehow possible to constrain a weighted element to a max value?
We tried to combine weight with widthIn(max=…) with no effect.

ConstraintWeightPreview.kt

[Stylianos Gakis]

Have you tried reordering the modifiers a bit, or using requiredWidthIn instead of just widthIn?
weight might be setting the constraints to something outside of what your weightIn specifies, and that one won’t change the constraints to force the new size. requiredWidthIn on the other hand should force the width despite incoming constraints

[Jonas]

Thx for your reply. Yes, I tried all combinations of reordering.

Just tried requiredWidthIn : The outcome is also not what I want, the element has the desired width but the weight calculation still uses the original width.

[Stylianos Gakis]

Hmm right, I am not sure how a weighted part of the list could also be told not to take the space that the list is giving it. I mean it can use less than the entire space given to it, but to limit the space given to it in the first place I don’t see how that can be done.
Are you sure weight is what you are looking for then? What does it mean for an item to take a specific weight, but also not all of it. If you have some examples of what the outcome of your layout would optimally look like maybe there is an alternative route on how to achieve it?

[Jonas]

The weight part is just something we sprinkled on top of an existing component. 😉
We have following card (see screenshot) which has an illustration on the left side.
Until now the illustration had a fixed size in dp which resulted in it taking up too much space in comparison to the right part on narrow screens.
Now we just added the weight modifiers to constrain the left part to a max ratio between illustration:text.
If the card is now wide enough that the illustration has more space than the original size, it just grows and the text starts further on the right side.

As our card has a fixed width this all is no problem, I was just curios if there is a proper solution for that.

[Stylianos Gakis]

Can you also show me the scenario where the “bad” thing happens that you want to avoid? I am still not 100% with you here.

[Jonas]

The yellow part is too much (the second screenshot is just without the yellow), which results in the text being too much on the right side, if the card has more space.
As I said, as this can not happen in our case I will just settle this here.

[Stylianos Gakis]

You may be looking for something like this https://github.com/HedvigInsurance/android/blob/96ae640dc65b1c7726c983ddfeae60dab1[…]ig/android/core/ui/text/HorizontalItemsWithMaximumSpaceTaken.kt honestly.

This one has a left slot (the card for you) and a right slot (the text content for you) and gives them as much space as they need, and if one doesn’t need all of its space but the other slot does, it gives it that, and vice versa.
Then when both need less than half of the space, they just receive half of the space. And if they both need more than half of the space, they again just get half each. This part you can change on your end so that if the first slot needs less than half of the available space, it’s just given to the second slot.

See also here https://kotlinlang.slack.com/archives/C04TPPEQKEJ/p1692364822243829?thread_ts=1692364663.387789&cid=C04TPPEQKEJ

[Jonas]

Interesting, thx for the link. I’ll have a proper look later.
Little off-topic: why do you don’t use the Layout(content*s* = listOf(…), api, where you can pass multiple children and handle them separately?

[Stylianos Gakis]

I just didn’t know it exists back then 😄
I can change it. I just haven’t seen it being used before 👀

[Stylianos Gakis]

If I am not misusing the API, it’d be turning this

Layout(
    content = {
      startSlot()
      endSlot()
    },
    modifier = modifier,
  ) { measurables, constraints ->
    val first = measurables.getOrNull(0)
    val second = measurables.getOrNull(1)

into this

Layout(
    contents = listOf(startSlot, endSlot),
    modifier = modifier,
  ) { measurables, constraints ->
    val first = measurables.getOrNull(0)?.getOrNull(0)
    val second = measurables.getOrNull(1)?.getOrNull(0)

Which tbh I don’t really like, am I missing something?

[Jonas]

I last used it here like this: https://git.fairkom.net/jonas/journal.st/-/blob/main/composeApp/src/commonMain/kotlin/st.journal/ListDetailLayout.kt#L17

But yeah, the first block looks more readable in your case.