LazyHorizontalGrid in Jetpack Compose

Jetpack Compose has revolutionized Android UI development with its declarative approach. One of the powerful components provided by Jetpack Compose is LazyHorizontalGrid, which allows us to create a horizontally scrolling grid of items with ease. In this blog post, we will dive into the details of LazyHorizontalGrid and learn how to leverage its capabilities to build dynamic and responsive user interfaces.

What is LazyHorizontalGrid?

LazyHorizontalGrid is a component in Jetpack Compose that enables us to create a grid of items that we can scroll horizontally. It follows the same lazy loading principle as other Lazy components, rendering only the visible items and dynamically recomposing as the user scrolls through the grid. With LazyHorizontalGrid, we can efficiently display a large number of items without sacrificing performance.

Simple List Example

fun SimpleList() {
    val listOfItems = mutableListOf<Int>()
    for (i in 1..20) {
        rows = GridCells.Fixed(3)
    ) {
        items(listOfItems) { item ->
                text = item.toString(),
                modifier = Modifier.padding(40.dp)

In the above example, we define a composable function called SimpleList. Inside the composable function, we use for loop to add numbers in the listOfItems mutable list.

Inside the LazyHorizontalGrid composable, we specify GridCells.Fixed(3) to create a grid with three columns.

items() function takes a list of items as a parameter and repeats the code in its lambda body for each item in the list.

And the items function repeats all the code in its lambda body for every item in the list.

We use a padding modifier of 40 dp in text composable so that a small list fills the entire screen.


lazyhorizontallist example

A Practical Example

Let’s create a horizontal grid of 4 columns that shows an image and the name of a beach.

First of all, we create a card with a column layout that holds an image and a text composable.

fun CardShower(beachName: String, modifier: Modifier) {
    val listOfColor =
        listOf(Color.Blue, Color.Magenta, Color.Red, Color.Yellow, Color.Cyan, Color.Green)

    Card(modifier = modifier.padding(8.dp)) {
            modifier = Modifier.padding(8.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
                painter = painterResource(id = R.drawable.ic_beaches),
                contentDescription = beachName,
                modifier = Modifier.padding(bottom = 4.dp),
                colorFilter = ColorFilter.tint(color = listOfColor.random())
            Text(text = beachName)
card hold an image and text for lazyhorizontalgrid

In the above example, we create a composable CardShower that takes two parameters: a string and a modifier. Inside composable, we create a list of colors so that we can change the colour of the image with a random colour chosen from the list.

We give 8 dp padding to the card composable so that it creates space around itself.

Alignment.CenterHorizontally – This parameter places the content in the centre horizontally inside the column layout.

Arrangement.Center – It also places the content in the centre but vertically inside the column layout.

Inside the image composable, we set a vector image from the drawable folder and content description to the beach name. And we provide a bottom padding of 4 DP to the image so that the beach name doesn’t look too congested.

And at the end of the Image composable, we set a random colour from the list we created earlier to the tint of ColorFilter of Image.

Now let’s call the LazyHorizontalGrid function

fun CustomList() {
    val listOfItems = mutableListOf(
        "Grande Anse",
        "Grace Bay",
        rows = GridCells.Fixed(4)
    ) {
        items(listOfItems) { item ->
            CardShower(beachName = item, modifier = Modifier)

In this function, we create a list of names of the beaches then we call the LazyHorizontalGrid function which is described earlier in this post. Inside the lambda body of the items function we call our CardShower function by passing each item of the list and a modifier.

full lazyhorizontalgrid
full lazyhorizontalgrid

A link that shows the above-illustrated image in the video.

Happy Composing 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *