Instruction

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled 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)  
        }  
    }
)

See forum comments
Download course materials from Github
Previous: Introduction Next: Demo