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.
- LazyColumn
- LazyRow
- LazyVerticalGrid
- 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) |