https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
a

Anthony

09/14/2021, 7:44 PM
In the sample code linked below, why does the second card not show all of it's elements?
Copy code
Row(
    Modifier
        .height(IntrinsicSize.Max)
        .fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    Card(
        Modifier
            .weight(1f)
            .fillMaxHeight()
    ) {
        Text("Hello")
    }
    Card(
        Modifier
            .weight(1f)
            .fillMaxHeight()
    ) {
        Column() {
            Text("hello", textAlign = TextAlign.Center)
            Icon(
                imageVector = Icons.Default.SafetyDivider,
                contentDescription = null,
                tint = iBibleYellow
            )

        }

    }
}
w

Will Shelor

09/15/2021, 4:33 AM
Why do you have the height set to IntrinsicSize.max? One of our devs used intrinsicSize, and it caused some erratic behavior. Does it work if you remove it?
a

Anthony

09/15/2021, 3:23 PM
I need the row to take the height of the largest element in the group, however, setting the row height with intrinsic size min or max does not work at all
c

Chris Sinco [G]

09/16/2021, 1:51 AM
I think you don’t need IntrinsicSize. The height of Row by default will be based on the tallest child. I modified your code a bit by removing some of the 
fillMaxHeight
modifiers, and got this result:
Modified code:
Copy code
@Preview(
    showBackground = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES
)
@Composable
fun Test(
    value: String = "Hello"
) {
    MyTheme {
        Row(
            Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Card(
                Modifier.weight(1f)
            ) {
                Text("Hello")
            }
            Card(
                Modifier.weight(1f)
            ) {
                Column {
                    Text(value, textAlign = TextAlign.Center)
                    Icon(
                        imageVector = Icons.Default.SafetyDivider,
                        contentDescription = null,
                    )
                }
            }
        }
    }
}
I introduced the 
value
param to the Composable to test it as a component in a List, which I assume is a use case for this so that the Row height always is set to the tallest content
List code:
Copy code
@Preview(
    showBackground = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES
)
@Composable
fun ListTest() {
    MyTheme {
        Column(
            Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Test()
            Test("adfsda lkasdj flaskdjf lkasdjf laksdjf asdlkjf alskdjf alsdjf laskdjf aksdfj dsalkjf dsa")
            Test()
            Test()
            Test("asldfjasldkfj lkj dalskfj lsdajf asldkjaf")
        }
    }
}
Not sure if this is helpful 🤷
a

Anthony

09/16/2021, 3:47 PM
@Chris Sinco [G] I appreciate the help, but I realize I didn't fully clarify my problem. What I want the row to do is be sized to the tallest element it has, and then have each of the smaller elements fill to the same height as the largest element within the row. Googling led me to the intrinsic size value but, when using it the larger element refuses to expand to it's supposed full size, leaving all the other smaller elements improper.
Copy code
@Preview
@Composable
fun PreviewIntrinsicSizeBlockRowText() {
    IBible_TestTheme {
        Row(
            Modifier
                .height(IntrinsicSize.Min)
                .fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Card(
                Modifier
                    .weight(1f)
                    .fillMaxHeight()
            ) {
                Text("Hello")
            }
            Card(
                Modifier
                    .weight(1f)
                    .fillMaxHeight()) {
                Column() {
                    repeat(10) {
                        Text("More content")
                    }
                }
            }
        }
    }
}
This is another test I have when testing out the intrinsic size height, It seems to work when it's a simple column with Text() but fails with my previous example of substituting just a single text and icon in a column
c

Chris Sinco [G]

09/16/2021, 6:11 PM
Gotcha - that is odd. I wonder if this is expected when a child has fillMaxHeight with a parent having height of IntrinisicSize.Max. Maybe @Adam Powell has some ideas
The other alternative is using BoxWithConstraints or a custom layout, though that makes things a bit more complicated. It’s strange that things work with multiple Text elements, but not when using Text and Icon…
Powered by