4

I'm using LazyVerticalGrid to create a responsive grid with 96 dp columns, it looks like this:

LazyVerticalGrid(
    columns = GridCells.Adaptive(96.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
) {
    Card {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Card {...}
            Text(title)
        }
    }
}

Grid

but there is a problem: the card content can has different heights due to text wrapping and I get negative space between the cards (marked with red arrows). Which of these solutions is possible in Compose without resorting to creating a custom layout?

  1. Make the height of other cards equals the maximum available height
  2. Make a staggered grid like this:

Staggered grid

proninyaroslav
  • 720
  • 2
  • 7
  • 19
  • 1
    These are separate questions. First one is easy if only text can be one line or two lines. https://stackoverflow.com/a/71485650/5457853 To implement second one with Lazy behavior you need to do lots of coding i assume. – Thracian Aug 08 '22 at 16:12
  • 1
    Second one: https://stackoverflow.com/a/64256721/5513788 – Code Poet Aug 08 '22 at 16:13
  • @Thracian It's not exactly what I want. It creates a padding even where there is no two-line text card in the row – proninyaroslav Aug 08 '22 at 17:19
  • It's not possible to have implement what you ask for without a workaround. Check google dev says here in comments about it. https://stackoverflow.com/a/69665926/5457853.`To know what the height of the tallest item in a lazy row would require composing and laying out the entire list which is what the LazyRow was designed to avoid. If you want the hight to be fixed you need to come up with a reasonable height and make all rows that height` – Thracian Aug 08 '22 at 17:31
  • Workaround is creating a Text with properties without showing user and getting max number of lines then applying what i posted as answer according to your max line count – Thracian Aug 08 '22 at 17:32
  • Yes it's possible with SubcomposeLayout. See my answer here https://stackoverflow.com/a/73595634/3857562 – Bob bobbington Sep 03 '22 at 22:00

1 Answers1

0

LazyHorizontalStaggeredGrid might work for you.

val itemsIndexedList = listOf("A", "B", "C")

LazyHorizontalStaggeredGrid(
    rows = StaggeredGridCells.Fixed(3)
) {
    itemsIndexed(itemsIndexedList) { index, item ->
        Text("Item at index $index is $item")
    }
}

For more detail, check the link below. https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/staggeredgrid/package-summary#LazyVerticalStaggeredGrid

Howard S
  • 111
  • 5
  • Don't just post some tool / library / plugin as an answer. At least demonstrate [how it solves the problem](//meta.stackoverflow.com/a/251605) in the answer itself. – 4b0 May 31 '23 at 04:55