Kotlin with Jetpack Compose -GridView

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…