Hello. I've encountered an unexpected behavior in my Compose layout which is critical to my project....

# compose

[Sergey Y.]

Hello. I've encountered an unexpected behavior in my Compose layout which is critical to my project.
I'm using Jetpack Compose BOM 2024.02.00.
More details in the thread 🧵

[Sergey Y.]

This is simplified version of my project's layout. It consists of a parent box with a cyan background and fixed dimensions. Within this parent box, there is a child box (gray) with a variable width and an offset (labeled 'Offset X' in the screenshots). The width and height of the child box can be adjusted, and for simplicity, the reproducer modifies only the width and x offset.

Issue:
As long as the child box's width is less than or equal to the parent box's width, it grows horizontally from left to right as anticipated, with transformOrigin set at (0,0). However, when the child box's width exceeds the parent box's width, it begins expanding in both directions—ignoring the specified offset and acting as if the transformOrigin has changed to the center, despite the transformOrigin being explicitly set to (0,0).

This unexpected behavior causes a significant issue for my project, as the requirement is for the child box to maintain its offset and to grow only from left to right. Efforts to manually control this behavior using Modifier.layout have not yielded the desired result; the child box grows symmetrically from the center once it exceeds the parent's width, which disrupts the layout alignment and breaks the UI logic.

Is there a way to ensure that the child box maintains its offset and does not start growing from the center when its width becomes larger than the parent box's width?

[Sergey Y.]

Here is the reproducer:
https://gist.github.com/desugar-64/395e4bc4bd0329a75e4064175542e956

compose_layout_issue.mp4

[ephemient]

what does your modifiers look like?

[Sergey Y.]

Which one

[ephemient]

if you're using wrapContentSize to unbound the child, it takes an alignment parameter

[Sergey Y.]

I attached a gist with simplest possible code.

[Sergey Y.]

I'm not using wrapContentSize the layout size depends on a computed value.

[Sergey Y.]

Here is the actual issue im my project.
The gray box represents the layout with variable size and offset. If I zoom in enough, you can see it misaligns once it exceeds the available screen width. To prove the rectangle coordinates are correct, I'm drawing a green rectangle using the canvas in the same layout.

layout_issue.mp4

[Sergey Y.]

Okay, I was able to workaround this issue using this hack:

[Sergey Y.]

But the main question remains open. 🤔

[ephemient]

because that's the default when something doesn't fit, you can override with .wrapContentSize(align = Alignment.CenterStart, unbounded = true)

[Sergey Y.]

do you mean to apply it for parent layout?

[ephemient]

no, on the child that's too large for the parent

[Sergey Y.]

will it work with .requiredSize?

[ephemient]

it goes outside of other size requirements, and if you use unbounded, you don't need requiredSize (it could be just size). but it should work

[Sergey Y.]

let me try

[Sergey Y.]

hah, it did the trick

[Sergey Y.]

image.png

[Sergey Y.]

But I mean, it does not feel intuitive to me

[Sergey Y.]

Nevertheless, it works now. Thank you for the help.

layout_issue_fixed.mp4demo_issue_fixed.mp4

[Zach Klippenstein (he/him) [MOD]]

Another approach, which would work for this simple case but maybe not as practical for your actual use case, would be making the cyan box a custom layout that measures and positions the gray child directly.

[Sergey Y.]

Yeah, it's not very practical within my project because the layout is a bit more complicated than the reproducer. But thanks.
Also, as you can see, I've successfully aligned the EditText with the graphics. However, I will wait for the moment when I can do the same using BTF2. Cheers 😄