Hey everyone, I'm stuck in a problem, if anyone k...

# android

[Mohnish]

Hey everyone,
I'm stuck in a problem, if anyone knows how to achieve this pls let me know.
I'm actually trying render cards in lazyRow,
For instance lets take ListcardData which has 15 elements. Now one of the element in the list could have large texts, so card will expand naturally in height!


The problem I've to solve is calculate the tallest card and make height of all the remaining card's height same.

[marlonlom]

🤔🤔🤔
Here's how you can achieve this using Jetpack Compose:

1. Measure the tallest card:

* Use onGloballyPositioned to get the height of each card.
* Keep track of the maximum height found so far.

2. Apply the maximum height:

* Use the Modifier.height to set the height of all cards to the maximum height.

Here's a code example:

kotlin
@Composable
fun LazyRowWithUniformCardHeight(cardDataList: List<CardData>) {
    var maxHeight by remember { mutableStateOf(0) }

    LazyRow {
        items(cardDataList) { cardData ->
            Card(
                modifier = Modifier
                    .onGloballyPositioned { coordinates ->
                        maxHeight = maxOf(maxHeight, coordinates.size.height)
                    }
                    .height(maxHeight.dp) // Apply the maximum height
            ) {
                // Card content using cardData
            }
        }
    }
}

Explanation:

* maxHeight state variable stores the tallest card height.
* onGloballyPositioned modifier measures each card's height and updates maxHeight.
* Modifier.height(maxHeight.dp) sets all cards to the tallest height.

[Mohnish]

Hey @marlonlom , this doesn't work, tried already,
for the 1st case of maxHeight = maxOf(maxHeight, coordinates.size.height) , maxHeight and coordinates.size.height both turn out to be zero, when you try to design it will see nothing on the screen as it forces height to take 0

[Arne Jans]

IMHO, you have three options:
1. If you have a very limited count of LazyRow-items, you could instead use a Row with height(IntrinsicSize.Min) and fillMaxHeight() on the Card.
2. If that is not an option due to high item-count, you could use two different Card-Composable, each with same fixed height, one for the big text, one for standard, and set the LazyRow-height to wrap its content.
3. Or you could create your own custom-layout, which uses IntrinsicSize, but I guess that wouldnt really offer an advantage, since SubcomposeLayout does not support asking for intrinsic measurement, but maybe there would be another approach I am not thinking of possible here. https://developer.android.com/develop/ui/compose/layouts/intrinsic-measurements

[Mohnish]

Thank you @Arne Jans, I'll check them out,
btw I used subcompose layout to calculate the height of the largest card and its working great!

[Mohnish]

Let me know if anyone need the code.

[Long Tran]

Hi @Mohnish , just came across and found this interesting, could you please share the code?

[Mohnish]

@Long Tran sorry for late response
Check the below SS
in 2nd parameter you will pass the composable (in my case its card design in carousel)
cartoonCard: @Composable (DailyAndAdditionGalleryCardData) -> Unit