CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpack
Wafi_ck
Wafi_ck

Reputation: 1388

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()?

Upvotes: 17

Views: 8125

Answers (3)

Phil Dukhov
Phil Dukhov

Reputation: 88347

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))
                }
            }
        }
    }
}

Upvotes: 3

Thracian
Thracian

Reputation: 67393

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

Upvotes: 7

Lalit Fauzdar
Lalit Fauzdar

Reputation: 6361

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.

Upvotes: -1

Related Questions