Kotlin with Jetpack Compose -GridView

Maneesha Erandi
3 min readMay 19

Grid view is an important UI that we use in mobile development.

Lazy grids

In Jetpack compose we have LazyVerticalGrid and LazyHorizontalGrid composables to display items in a grid. With LazyVerticalGrid we can scroll items vertically and with LazyHorizontalGrid we can scroll items horizontally.

In this article I will create an example using LazyVerticalGrid.

LazyVerticalGrid properties

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

Create a grid item list

You can create a custom GridItem data class with the desired properties. And then make a list with dummy data.

data class GridItem(
val id: Int,
val title: String,
val subtitle: String,
val imageUrl: String

val gridItemsList = listOf(
GridItem(1, "Item 1", "Subtitle for item 1", "http://eyesofwild.com/wp-content/uploads/photo-gallery/imported_from_media_libray/yau16-23.jpg"),
GridItem(2, "Item 2", "Subtitle for item 2", "http://eyesofwild.com/wp-content/uploads/photo-gallery/imported_from_media_libray/yfb17-4.jpg"),
GridItem(3, "Item 3", "Subtitle for item 3", "http://eyesofwild.com/wp-content/uploads/photo-gallery/imported_from_media_libray/ya16-27.jpg"),
GridItem(4, "Item 4", "Subtitle for item 4", "http://eyesofwild.com/wp-content/uploads/photo-gallery/imported_from_media_libray/yfb17-36.jpg")

Create a custom grid item view

You can create this with a matching ui for your requirement. This is the function that I created with an Image and two Text views.

fun GridItemView(item: GridItem) {
modifier = Modifier
) {…
Maneesha Erandi

I write about mobile development and wildlife.