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

@Composable
fun SimpleList() {
    val listOfItems = mutableListOf<Int>()
    for (i in 1..20) {
        listOfItems.add(i)
    }
    LazyHorizontalGrid(
        rows = GridCells.Fixed(3)
    ) {
        items(listOfItems) { item ->
            Text(
                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.

Output:

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.

@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)) {
        Column(
            modifier = Modifier.padding(8.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_beaches),
                contentDescription = beachName,
                modifier = Modifier.padding(bottom = 4.dp),
                colorFilter = ColorFilter.tint(color = listOfColor.random())
            )
            Text(text = beachName)
        }
    }
}

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

@Composable
fun CustomList() {
    val listOfItems = mutableListOf(
        "Mumbai",
        "Cuba",
        "Digue",
        "Varadero",
        "Seychelles",
        "Rabbit",
        "Grande Anse",
        "Grace Bay",
        "Cabbage",
        "Wineglass",
        "Champagne",
        "Palaui",
        "Whitehaven",
        "Tulum",
        "Pulau"
    )
    LazyHorizontalGrid(
        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.

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

Happy Composing 🙂