Instruction
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Jetpack Compose offers four variants of grids out of the box:
- LazyVerticalGrid: Creates a vertically scrolling grid.
- LazyHorizontalGrid: Creates a horizontally scrolling grid.
- LazyVerticalStaggeredGrid: Creates a vertically scrolling staggered grid.
- LazyHorizontalStaggeredGrid: Creates a horizontally scrolling staggered grid.
You’ll go over each of these one by one.
Exploring Grids in Jetpack Compose
When building standard grid UIs in Jetpack Compose, you can opt for LazyVerticalGrid and LazyHorizontalGrid, both of which allow you to display items in a grid.
@Composable
fun LazyVerticalGrid(
columns: GridCells,
modifier: Modifier = Modifier,
state: LazyGridState = rememberLazyGridState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical =
if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
content: LazyGridScope.() -> Unit
)
@Composable
fun LazyHorizontalGrid(
rows: GridCells,
modifier: Modifier = Modifier,
state: LazyGridState = rememberLazyGridState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
horizontalArrangement: Arrangement.Horizontal =
if (!reverseLayout) Arrangement.Start else Arrangement.End,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
content: LazyGridScope.() -> Unit
)
@LazyGridScopeMarker
sealed interface LazyGridScope {
fun item(
key: Any? = null,
span: (LazyGridItemSpanScope.() -> GridItemSpan)? = null,
contentType: Any? = null,
content: @Composable LazyGridItemScope.() -> Unit
)
fun items(
count: Int,
key: ((index: Int) -> Any)? = null,
span: (LazyGridItemSpanScope.(index: Int) -> GridItemSpan)? = null,
contentType: (index: Int) -> Any? = { null },
itemContent: @Composable LazyGridItemScope.(index: Int) -> Unit
)
}
Using LazyVerticalGrid and LazyHorizontalGrid
You can use a LazyVerticalGrid as in the following example:
LazyVerticalGrid(
columns = GridCells.Adaptive(minSize = 100.dp)) {
items(items = photos) { photo ->
PhotoItem(photo)
}
}
LazyHorizontalGrid(
rows = GridCells.Adaptive(minSize = 50.dp)) {
items(items = testimonials) { testimonial ->
TestimonialCard(testimonial)
}
}
Exploring Staggered Grids in Jetpack Compose
A staggered grid is one in which items are arranged non-uniformly across their respective axes. Such grids can prove helpful when rendering items with non-uniform width and height, like a collection of photos.
@Composable
fun LazyVerticalStaggeredGrid(
columns: StaggeredGridCells,
modifier: Modifier = Modifier,
state: LazyStaggeredGridState = rememberLazyStaggeredGridState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalItemSpacing: Dp = 0.dp,
horizontalArrangement: Arrangement.Horizontal = Arrangement.spacedBy(0.dp),
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
content: LazyStaggeredGridScope.() -> Unit
)
@Composable
fun LazyHorizontalStaggeredGrid(
rows: StaggeredGridCells,
modifier: Modifier = Modifier,
state: LazyStaggeredGridState = rememberLazyStaggeredGridState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(0.dp),
horizontalItemSpacing: Dp = 0.dp,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
content: LazyStaggeredGridScope.() -> Unit
)
Using LazyVerticalStaggeredGrid and LazyHorizontalStaggeredGrid
You can use a LazyVerticalStaggeredGrid as in the following example:
LazyVerticalStaggeredGrid(
modifier = Modifier.fillMaxSize(),
columns = StaggeredGridCells.Adaptive(200.dp),
verticalItemSpacing = 4.dp,
horizontalArrangement = Arrangement.spacedBy(4.dp),
content = {
items(randomSizedPhotos) { photo ->
PhotoItem(photo)
}
}
)