I have multiple rows of height 60dp and a certain (same between rows) aspect ratio, but if I lower t...

# compose

[martmists]

I have multiple rows of height 60dp and a certain (same between rows) aspect ratio, but if I lower the LocalDensity, those rows don't all keep the same width; some end up as 33px and others as 34px. How can I fix this?

[martmists]

I think it's caused by the two rows being in one container row of 120dp, but that still should be fitting just fine no matter at what scale...

[romainguy]

What's the exact setup?

[martmists]

I'd have to share the entire project for that, which I'm currently unable to. My best attempt is:

Row(modifier=Modifier.height(120.dp)) {
    Column {
        Row(Modifier.height(60.dp)) {
            // A bunch of elements with .aspectRatio, hence why I need to hardcode a height
        }
        Row(Modifier.height(60.dp)) {
            // Same here
        }
    }
    // some other elements here
}

When this snippet receives a few different values for LocalDensity less than 1, those two rows will not end up having the same width, causing elements in them to be misaligned.

[Alex Vanyo]

Layout sizes of UI components will be rounded to an integer number of pixels - and depending on the density values, there’s no guarantee at all that an integer number of dp will exactly result in an integer number of pixels so rounding errors can accumulate.

If rounding 120.dp to an integer number of pixels results in an odd number, and you’re trying to split those pixels equally among 2 children, either one of the children gets an extra pixel or something else has to happen with the odd pixel out

[Alex Vanyo]

https://medium.com/androiddevelopers/density-devices-and-flaky-tests-ce41ac1e6299 has another example: a Column that contains 6 items that are each 10dp high might end up being 60dp high, or ~61.7dp high, or something else, depending on the density

[romainguy]

@Alex Vanyo @martmists mentioned the width being different across the rows, which is why I asked to see the setup

[martmists]

@Alex Vanyo in that case, how would I round down the number of pixels used for both to make sure it fits? (or ideally, all rows that are configured as 60 dp)

[Alex Vanyo]

Ah, maybe the aspect ratios are resulting in different widths, because the heights of the two rows are different? So if one height is 33px, an aspect ratio of 2:1 would result in a width of 66px, but if the either height is 34px, then the aspect ratio of 2:1 would result in a width of 68px?

[martmists]

Yes, so ideally I make all of their heights exactly the same

[martmists]

How would I go about doing that, knowing dp isn't reliable?

[romainguy]

dp is reliable, what's not is distributing available space

[romainguy]

60dp will yield the same px everywhere, unless you use weights or similar mechanisms

[martmists]

Right, so what do I do in this case?

[Alex Vanyo]

One thing you could try is removing the outer Modifier.height(120.dp) if you don’t need it and let the size be taken up naturally, which should allow each child to get the same rounded height

[Alex Vanyo]

The most general solution will be a custom layout: if you have an odd number of pixels to work with, and you want to control the rounding behavior extremely precisely, you can manually measure and place in the space you have

[martmists]

The former won't work since some of the other elements also have a specific aspect ratio unfortunately. For now I've settled on manually converting the desired dp to px, rounding that down to a whole number, then converting back to dp. Though, that still doesn't entirely solve the problem.