androidkotlinandroid-jetpack-composeandroid-jetpack-compose-material3

What is the grid item equivalent for ListItem in Material 3


In Material 3 for Jetpack Compose, there's a component to allow easy implementation of list items. However, on larger screens this is not ideal as list items appear to be stretched. Is there an equivalent component to this in the form of a grid item?

    ListItem(
        headlineContent = { Text("Three line list item") },
        overlineContent = { Text("OVERLINE") },
        supportingContent = { Text("Secondary text") },
        leadingContent = {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = "Localized description",
            )
        },
        trailingContent = { Text("meta") }
    )

Solution

  • The ListItem is defined to fill up the whole available width. As such, it still is perfectly usable as a GridItem inside of a LazyVerticalGrid:

    @Composable
    fun GridItemDemo() {
        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier.fillMaxSize()
        ) {
            items(10) {
                ListItem(
                    headlineContent = { Text("Three line list item") },
                    overlineContent = { Text("OVERLINE") },
                    supportingContent = { Text("Secondary text") },
                    leadingContent = {
                        Icon(
                            Icons.Filled.Favorite,
                            contentDescription = "Localized description",
                        )
                    },
                    trailingContent = { Text("meta") }
                )
            }
        }
    }
    

    Output:

    Screenshot

    If you want to have a LazyColumn on small screens and a LazyVerticalGrid on big screens, the ListItem does not have anything to do with it. Instead, you could use a LazyVerticalGrid with a Adaptive cell configuration:

    @Composable
    fun GridItemDemo() {
        LazyVerticalGrid(
            columns = GridCells.Adaptive(350.dp),
            modifier = Modifier.fillMaxSize()
        ) {
            items(10) {
                ListItem(
                    //...
                )
            }
        }
    }
    

    Portrait:

    enter image description here

    Landscape:

    enter image description here