Hello, is it possible to limit width of `placeable...

# compose

[nuhkoca]

Hello, is it possible to limit width of placeables using custom layout? In my case, button overlaps other items but I would expect other components to get smaller as much as button gets wider. Code in the 🧵

[nuhkoca]

layout(constraints.maxWidth, height) {
    titlePlaceable.placeRelative(x = 0, y = iconPlaceable.height / 2 - titlePlaceable.height / 2)
    iconPlaceable.placeRelative(x = titlePlaceable.width, y = 0)
    performancePlaceable.placeRelative(
        x = 0,
        y = iconPlaceable.height / 2 + titlePlaceable.height / 2 + titleBottomSpacing
    )
    followButtonPlaceable.placeRelative(
        x = constraints.maxWidth - followButtonPlaceable.width,
        y = (contentHeight - followButtonPlaceable.height) / 2
    )
}

[Filip Wiesner]

is it possible to limit width of placeables

Not of placeables but mearurable s. You have to constraint them in measure phase

[nuhkoca]

thanks Filip, awesome! so could you please tell me how can I achieve having the same effect of
Button(Modifier.weight(1f)) so button will take precedence

this is my code for `mearurable`s

val placeables = measurables.map {
    it.measure(constraints)
}

[Filip Wiesner]

Here you are measuring all measurables with the same constraints. You will have to first measure the measurables that have priority and than constraint the other measurables to take only the rest of the space.

[nuhkoca]

I see, awesome let me try it out

[nuhkoca]

but why then the components on the left hand side didn’t take precedence by default and squeezed under the button, is that expected? I guess by default any of them takes the same prio so this is the reason right? 🙂

[Filip Wiesner]

Yes beacause you measured all of them with the same constraints. You have to tell the components how much space they can take. There is no "default" priority. Everything is up to you

[Filip Wiesner]

If the button should take the rest of the space after the other components, you will have to measure the other components first and than measure the button with constraints that reflect this remaining space.
Something like this

val remainingWidth = constraints.maxWidth - spaceTakenByOtherComponents
buttonMeasurable.measure(
    Constraints(maxWidth = remainingWidth)
)

[nuhkoca]

Thanks. In fact, vice versa, the other ones will take the rest of the space after the button. I couldn’t manage to measure the others. Isn’t this the approach I need to take?

measurables.first().measure(constraints.copy(maxWidth = 150))

so how to pass the correct constraints for those which need to be measured first? Sorry I am pretty dumb at this things 🙂

[Filip Wiesner]

Ok, let's look at it from different angle.
measurables is list of components that you are passing to the content lambda of your layout. They are in the same order as called in the content. In the first step you get those that are prioritized over others and measure them with all of the available space (e.g. Constraints(maxWidth = constraints.maxWidth, maxHeight = constraints.maxheight)). It's not the best practice to copy the constraints that are given to you in measure policy scope. You might copy min constraints as well and you rarely want that.
When you have the priority measurables measeured, you can determine how much space you have left and constraint the remaining measurables to this space.
In other words, you measure the measurables one by one, creating custom Constraints for each of them to match the actual remaining space.

I was looking for some good example in google compose samples but couldn't find any layout where one measurable would constraint some other.

[nuhkoca]

Thanks man for the detail explanation Filip. Okay I got that I can create a prioritized component with Constraints(maxWidth = constraints.maxWidth, maxHeight = constraints.maxheight) and can slice the remaining space for the rest. So I have 3 components in a row, Text, Icon and Button. So Button would already have been laid out. Might be a stupid question but how could I determine the correct width for the rest. For instance, Text will more space from the remaining space than the Icon does. How can I figure out the best width

[Filip Wiesner]

You know the max width from the layout constraints you received so in this case you just subtract the width of the button and you get the remaining available space.

[nuhkoca]

Thanks Filip, will look into this considering your advices. Appreciate your help here!

[nuhkoca]

🦜

[Filip Wiesner]

Nice, I'm glad I could help