Hi, I have a question relating to matchParentSize / Intrinisic layouts. The use case is i have an ac...

# compose

[Nathan Castlehow]

Hi,
I have a question relating to matchParentSize / Intrinisic layouts.
The use case is i have an accordion looking structure where i click sections to expand them. Alongside this whole structure I want a bar to match the height, including when it expands (more details in thread).

[Nathan Castlehow]

I’ve tried a couple approaches.

[Nathan Castlehow]

1. Using Intrinsic Min.
This doesn’t work as we give the Box a constraint (Intrinsic Size.Min and set the Divider to fillMaxHeight.. This means when we expand it happens inside of this constraint instead of making the view as a whole longer. We then get stuff getting squished or no longer shown on screen.

Box(modifier = Modifier.height(IntrinsicSize.Min),contentAlignment = Alignment.TopStart) {
                            Divider(
                                modifier = Modifier
                                    .padding(6.dp)
                                    .fillMaxHeight()
                                    .width(12.dp)
                                    .background(color = Color.Red)
                            )
                            ExpandingContent()
}

[Nathan Castlehow]

2. Match Parent Size then specify the desired width (with required width).
This gets us close as the bar grows along with the Box. The issue is that it gets center aligned (I believe it has to do with something mentioned in another thread where if it is too big to fit the incoming constraints it gets center aligned?)

Box(contentAlignment = Alignment.TopStart) {
                            Divider(
                                modifier = Modifier
                                    .padding(6.dp)
                                    .matchParentSize()
                                    .requiredWidth(12.dp)
                                    .background(color = Color.Red)
                            )
														ContentWhichExpands()
}

[Nathan Castlehow]

My feeling is match parent size is the way here but I can’t tell why it thinks that it should be center aligned. Would love peoples thoughts on this one?

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

Would it be useful to have individual matchParentWidth and matchParentHeight modifiers?

[Nathan Castlehow]

I think it would be, even with that though it still seems to be “too big” for the parent container causing the centre align (I think?)

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

Might be easier to just make a custom layout

[Nathan Castlehow]

Potentially but it still feels like there might be a bug here. The divider being center aligned tells me its too big for the parent even though its mean to be matching the parent height.

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

You should definitely file it (tracker link is in the channel topic). I could be wrong, but I don’t think this is necessarily an intrinsics bug because these look like non-trivial nodes that probably don’t have a meaningful intrinsic size – they actually need to be measured. And I don’t think your modifier chain is a bug because if the matchParentSize comes before the requiredWidth, that’s effectively saying there’s a box that should take up the entire width, and then inside of that a smaller box that only takes up 12 dp, and so the smaller box gets centered inside the big one. But if you file a bug, please post it here so i can follow it – i’m curious what the recommended approach would be if it’s not.

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

Did you try putting the requiredWidth before the matchParentSize? Probably wouldn’t work either, but i’m curious what that would do

[Nathan Castlehow]

Doing so has the same result

[Nathan Castlehow]

https://issuetracker.google.com/issues/187757009 created an issue