Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

310
Views
How to level the height of items in LazyVerticalGrid?

I'm using LazyVerticalGrid to display list of items.

LazyVerticalGrid(
            cells = GridCells.Fixed(2),
            modifier = Modifier.fillMaxSize(),
            state = listState,
            content = {
                    Box(modifier = boxModifier) {
                        ProductItemView(
                            item = items[index]
                        )
                    }
                }
            }
        )

Sometimes some of my items are higher than the items next to them (attachemnt) enter image description here

How can I adjust the height of the all items? Or should I use something other than VerticalGrid()?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

What's happening is which ever item has text larger than one line, it expands

To keep a uniform height, you have to set a minimum height to every child Box, to do so, you can use the Modifier as below.

//Adjust 200.dp as your requirement
Box(modifier = Modifier.height(200.dp))

This way, every box will have same height irrespective of the length/size of the content.

over 4 years ago · Santiago Trujillo Report

0

If you give a fixed height to your Composables you might end up Composables that don't display some part of your child composables, in your case it might be Text composable.

First and easy way is to set a minimum height Modifier.heightIn(min = 200.dp), this might leave space below or above your composable depending on your Box alignment, and if your Composables are taller than 200.dp it will have the same effect you have now, so it's not or adding any fixed height is not enough.

Better way is to use onTextLayout to get Text's line count and height to add smaller number of lines as padding as

@Composable
fun GridSnackCardWithTitle(
    modifier: Modifier = Modifier,
    snack: Snack,
) {
    Column(
        modifier = modifier
            .heightIn(min = 200.dp)
            .shadow(1.dp, shape = RoundedCornerShape(5.dp))
            .background(Color.White),

        ) {

        val density = LocalDensity.current.density

        Image(
            contentScale = ContentScale.None,
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(1f)
                .clip(RoundedCornerShape(8.dp))
                .clickable { },
            painter = rememberImagePainter(
                data = snack.imageUrl,
                builder = {
                    placeholder(drawableResId = R.drawable.placeholder)
                }
            ),
            contentDescription = null
        )

        Spacer(modifier = Modifier.height(4.dp))
        var padding by remember { mutableStateOf(0.dp) }
        Text(
            modifier = Modifier.padding(start = 4.dp, end = 4.dp, bottom = padding),
            text = "Snack ${snack.name}",
            fontSize = 20.sp,
            onTextLayout = {
                val lineCount = it.lineCount
                val height = (it.size.height / density).dp

                println("lineCount: $lineCount, Height: $height")
                padding = if (lineCount > 1) 0.dp else height
            }
        )
        
    }
}

Result

enter image description here

over 4 years ago · Santiago Trujillo Report

0

Usually such problem is solved by adding Modifier.fillMaxHeight to containing items, and Modifier.height(IntrinsicSize.Max) to the container.

The problem is that in this case we don't have access to the container Modifier: in Compose 1.1.* there's a Row in the source code, but we cannot pass our modifier down to it, and in 1.2.* there's no Row at all.

I think such a request is fair, but for now you can do it yourself in LazyColumn:

val columnsCount = 2
val itemsCount = 10
LazyColumn(
    modifier = Modifier.fillMaxSize()
) {
    items((itemsCount + 1) / columnsCount) { i ->
        Row(Modifier.height(IntrinsicSize.Max)) {
            for (j in 0 until columnsCount) {
                val index = i * columnsCount + j
                if (index < itemsCount) {
                    Text(
                        LoremIpsum(index).values.first(),
                        modifier = Modifier
                            .fillMaxHeight()
                            .weight(1f)
                            .background(
                                when (index % 3) {
                                    0 -> Color.LightGray
                                    1 -> Color.DarkGray
                                    else -> Color.Gray
                                }
                            )
                    )
                } else {
                    Spacer(Modifier.weight(1f))
                }
            }
        }
    }
}
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!