Issue

I’m trying to implement a layout in Compose where items in a horizontally scrollable Row must all have the same height. I know about intrinsic sizes, but I can’t get it to work. No. Also, I don’t want to assign a fixed height to Row. Because the Row height must also be the height of its largest composable child.

This is a simplified layout

@Composable
Fun screen (
    modifier: modifier = modifier,
) {
    line(
        modifier = modifier
            .height(IntrinsicSize.Min)
            .horizontalScroll(state = rememberScrollState()),
        horizontalArrangement = Arrangement.spacedBy(10.dp),
    ) {
        item(
            text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy " +
                    "eirmod tempor invidunt ut Labore et Dolore Magna aliquyam"
        )

        item(
            text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy " +
                    "eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam " +
                    "Voluptua. In"
        )

        item(
            text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam"
        )
    }
}

@ Composable
private fun items (
    modifier: modifier = modifier,
    text: string,
) {
    digit(
        modifier = modifier.width(200.dp),
        horizontalAlignment = Alignment.End,
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Digit {
            Text("Static Text")

            // dynamic text
            text (
                sentences,
                Modifier = Modifier.padding(Top = 5.dp)
            )
        }

        // The space between these two composables should be flexible.
        // So the outer column of Arrangement.SpaceBetween

        button(
            Modifier = Modifier.padding(top = 20.dp),
            onClick = {}
        ) {
            Text("Button")
        }
    }
}
 

This is the result

But what I really want is

Applying fillMaxHeight() to Item causes the item to take up the entire height and put all buttons at the bottom of the screen.

Jetpack Compose Version: 1.1.0

Solution

The described behaviour is a bug in Compose which I reported on Feb 11, 2022. It was marked as fixed on Aug 13, 2022. However it is yet unknown which Compose version will contain this fix.

Answered By – Sven Jacobs

Answer Checked By – David Goodson (Easybugfix Volunteer)

Tags: android, android-jetpack, android-jetpack-compose