CODEWITHSUNDEEP
android-jetpack-compose
RareScrap
RareScrap

Reputation: 593

Why .width() and .height() modifiers apply wrong value?

I want two independent rows to have the same width and scroll simultaneously. I have tried to achieve this in this way:

@Composable
fun TwoRows() {
    val scrollState = rememberScrollState()

    Column(Modifier.fillMaxWidth()) {
        Row(Modifier.fillMaxWidth().horizontalScroll(scrollState)) {
            for (i in 0 until 100) {
                Box(Modifier.width(10.dp).height(10.dp).background(Color.Red))
                Spacer(Modifier.width(90.dp))
            }
        }
        Row(Modifier.fillMaxWidth().horizontalScroll(scrollState)) {
            for (i in 0 until 100) {
                Box(Modifier.width(100.dp).height(10.dp).background(Color.Green))
            }
        }
    }
}

The first row consists of 10 dp width red rectangles and 90 dp width spacers. The second row consists of only 100 dp width green rectangles. I'm expecting these rows to have the same width but the layout inspector shows they're not:

First row width

Second row width

Because of this the elements do not match expecting positions:

Accumulating of width calculation errors

How can I fix it?

Upvotes: 1

Views: 639

Answers (1)

RareScrap
RareScrap

Reputation: 593

This is happening because each of .size(), width(), .height() modifiers transform incoming value into pixel just in time it applied. I.e. they apply independently - the first modifier converts its value to pixels, and then the second, and so on. There is no guarantee that you get the same dp value after transforming it to px and back because of rounding. Here is how dp->px->dp transformation works for your case:

dp = 10.dp // Incoming dp value
density = 2.625 // Screen density scale value of your emulator
unrounded_px = 10 * density = 26.25
px = 26
restored_dp = 26 / density = 9.904762.dp

Most likely that the LayoutInspector doesn't round computed dp value to the nearest integer, but simply discards the fractional part. I think this is the reason why it shows different value. Such behavior is especially likely to occur when you work with relatively small views on low pixel density screens.

You can achieve desired behavior wrapping your red Box and Spacer into the Box with specified size:

Box(Modifier.width(100.dp).height(10.dp)) {
    Box(Modifier.width(10.dp).height(10.dp).background(Color.Red))
    Spacer(Modifier.width(90.dp))
}

Upvotes: 1

Related Questions