Material 3 Lists and Grids in Jetpack Compose

Material 3 Lists and Grids in Jetpack Compose

Get started with Material 3 lists and grids in Jetpack Compose to create user-friendly interfaces for displaying collections of items.

Explore Lists and Grids Styles

Learn to implement four Material 3 layout types for displaying scrollable collections of items.


There are four Lists and Grids styles:
  1. LazyColumn
  2. LazyRow
  3. LazyVerticalGrid
  4. LazyVerticalStaggeredGrid

LazyColumn

Shows a vertically scrolling list.


@Composable
fun LazyColumnExample() {
    // Creates a vertically scrolling list
    val messages = remember {
        listOf("Message 1", "Message 2", "Message 3")
    }
    LazyColumn(
        modifier = Modifier.fillMaxSize(), // Customizes list layout
        verticalArrangement = Arrangement.spacedBy(8.dp), // Adds spacing between items
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp) // Adds padding around content
    ) {
        items(messages) { message ->
            Text(message) // *Required: Defines list item content
        }
    }
}

Use a LazyColumn when you want to show a vertically scrolling list.

Examples:

  • Show a chat history in a messaging app
  • Display a list of tasks in a to-do app
  • Present articles in a news app

LazyRow

Shows a horizontally scrolling list.


@Composable
fun LazyRowExample() {
    // Creates a horizontally scrolling list
    val items = remember {
        listOf("Item 1", "Item 2", "Item 3")
    }
    LazyRow(
        modifier = Modifier.fillMaxSize(), // Customizes list layout
        horizontalArrangement = Arrangement.spacedBy(8.dp), // Adds spacing between items
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp) // Adds padding around content
    ) {
        items(items) { item ->
            Text(item) // *Required: Defines list item content
        }
    }
}
  

Use a LazyRow when you want to show a horizontally scrolling list.

Examples:

  • Show category filters in a shopping app
  • Display image thumbnails in a gallery app
  • Present trending topics in a social media app

LazyVerticalGrid

Shows a vertically scrolling grid.


@Composable
fun LazyVerticalGridExample() {
    // Creates a vertically scrolling grid
    val photos = remember {
        listOf("Photo 1", "Photo 2", "Photo 3", "Photo 4")
    }
    LazyVerticalGrid(
        columns = GridCells.Fixed(2), // *Required: Sets number of columns
        modifier = Modifier.fillMaxSize(), // Customizes grid layout
        verticalArrangement = Arrangement.spacedBy(8.dp), // Adds vertical spacing
        horizontalArrangement = Arrangement.spacedBy(8.dp), // Adds horizontal spacing
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp) // Adds padding around content
    ) {
        items(photos) { photo ->
            Text(photo) // *Required: Defines grid item content
        }
    }
}
  

Use a LazyVerticalGrid when you want to show a vertically scrolling grid.

Examples:

  • Show product images in an e-commerce app
  • Display photo tiles in a gallery app
  • Present cards in a dashboard app

LazyVerticalStaggeredGrid

Shows a staggered grid with varying item heights.


@Composable
fun LazyVerticalStaggeredGridExample() {
    // Creates a vertically scrolling staggered grid
    val photos = remember {
        listOf("Photo 1", "Photo 2", "Photo 3", "Photo 4")
    }
    LazyVerticalStaggeredGrid(
        columns = StaggeredGridCells.Fixed(2), // *Required: Sets number of columns
        modifier = Modifier.fillMaxSize(), // Customizes grid layout
        verticalItemSpacing = 8.dp, // Adds vertical spacing between items
        horizontalArrangement = Arrangement.spacedBy(8.dp), // Adds horizontal spacing
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp) // Adds padding around content
    ) {
        items(photos) { photo ->
            Text(photo) // *Required: Defines grid item content
        }
    }
}
 

Use a LazyVerticalStaggeredGrid when you want to show a staggered grid with varying item heights.

Examples:

  • Show images of different sizes in a gallery app
  • Display product cards in an e-commerce app
  • Present news tiles in a media app

Lists and Grids Properties

Understand the key properties used in the lists and grids examples.

Property Usage
content* Required: Defines list or grid items using items() DSL, like Text
columns* Required (LazyVerticalGrid, LazyVerticalStaggeredGrid): Sets the number of columns (e.g., Fixed(2))
modifier Customizes layout, like size (e.g., fillMaxSize)
verticalArrangement Sets vertical spacing between items (e.g., spacedBy(8.dp))
horizontalArrangement Sets horizontal spacing between items (e.g., spacedBy(8.dp))
contentPadding Adds padding around content (e.g., 16.dp horizontal, 8.dp vertical)
verticalItemSpacing Sets vertical spacing between items in a staggered grid (e.g., 8.dp)

Post a Comment

Previous Post Next Post