LazyRow in Jetpack Compose

Displaying data on a list is always been a cumbersome process. In view-based Android development, we use RecyclerView and Adapter to display the data of a list in Android. But with the help of Jetpack Compose, we can display the data of a list very easily. Jetpack Compose LazyRow display data horizontally and LazyColumn display data vertically.

Row

If your list is small or has a limited number of items then you can use Row to display the data of a list. Let’s take an example:

@Composable
fun LazyRowShower() {
    val phoneNameList = listOf("Google", "Samsung", "Apple", "OnePlus")
    Row {
       phoneNameList.forEach { phone ->
           Text(text = phone)
       }
    }
}

forEach is a high-order function of Kotlin. In the foreEach lambda, phone variable represents each item in the phoneNameList. forEach function calls the Text function for each item in the phoneNameList.

Note: Always use LazyRow for the list with a large number of items.

Scrollable Row

By default, Row is not scrollable. We use horizontalScroll() modifier to make it scrollable. Let’s take an example:

If we grow our list size and leave the remaining code is same as above.

val phoneNameList = listOf(
        "Google ",
        "Samsung ",
        "Apple ",
        "OnePlus ",
        "Motorola ",
        "Xiaomi ",
        "Vivo ",
        "Spice "
    )

Let’s fix the above error using horizontalScroll modifier.

Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
        phoneNameList.forEach { phone ->
            Text(text = phone)
        }
    }

LazyRow

LazyRow displays data of a list horizontally in an efficient manner. It is better than Row because the row loads all the data at once while LazyRow loads the data only visible on the screen.

1. Simple List

@Composable
fun LazyRowShower1() {
    LazyRow {
        item {
            Text(text = "First Item  ")
        }
        items(5){
            Text(text = "Text No: $it ")
        }
        item{
            Text(text = "Last Item")
        }
    }
}

item() – It represents a single item.

items() – It represents multiple items by taking a parameter of the type Int which represents the number of items.

2. Advance List

In this section, we will create a horizontal list, of a Card containing a flower and its name, using LazyRow.

1. Create a data class

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes

data class Flower(
    @DrawableRes val imageResId: Int,
    @StringRes val nameResId: Int,
)

This data class holds each flower with its imageResId and nameResId.

• nameResId – It represents an ID for the dog name text stored in the string resource.
• imageResId – it represents an ID for the dog image stored in the drawable resource.

Note: Never use strings directly in the code, always store them in a string resource file (strings.xml) located at /res/values/.

2. strings.xml

This file holds flower names that are used in the Flower data class.

 // Flower Name
    <string name="rose_1">Red Rose</string>
    <string name="rose_2">White Rose</string>
    <string name="rose_3">White Rose</string>
    <string name="rose_4">Pink Rose</string>
    <string name="rose_5">Red Rose</string>
    <string name="rose_6">White Rose</string>
    <string name="rose_7">Yellow Rose</string>

3. List of Flower

Now, we create a function that returns a list of Flower data class.

fun flowerList(): List<Flower> {
    return listOf(
        Flower(R.drawable.rose1, R.string.rose_1),
        Flower(R.drawable.rose2, R.string.rose_2),
        Flower(R.drawable.rose3, R.string.rose_3),
        Flower(R.drawable.rose4, R.string.rose_4),
        Flower(R.drawable.rose5, R.string.rose_5),
        Flower(R.drawable.rose6, R.string.rose_6),
        Flower(R.drawable.rose7, R.string.rose_7)
    )
}

Images used in the above function are stored in /res/drawable directory.

4. Dog Card

This is a composable function that will show the flower image and flower name in the column.

@Composable
fun FlowerCard(flower: Flower, modifier: Modifier) {
    Card(modifier = modifier) {
        Column(
            modifier = Modifier.padding(16.dp).size(150.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            Image(
                painter = painterResource(id = flower.imageResId),
                contentDescription = stringResource(id = flower.nameResId),
                modifier = Modifier.size(100.dp).clip(CircleShape),
                contentScale = ContentScale.Crop
            )
            Text(
                text = stringResource(id = flower.nameResId),
                modifier = Modifier.padding(bottom = 8.dp),
                fontWeight = FontWeight.Bold,
            )
        }
    }
}

Let’s ignore Card component for this post.

Arrangement.SpaceBetween – It places the children such that they are spaced evenly across the main axis, without free space before the first child or after the last child.

5. LazyRow

In this section, we will implement LazyRow function.

@Composable
fun LazyRowShower2(flowerList: List<Flower>, modifier: Modifier) {
    LazyRow(modifier = modifier) {
        items(flowerList) { flower ->
            FlowerCard(flower = flower, modifier = Modifier.padding(8.dp))
        }
    }
}

LazyRow function takes a modifier as a parameter and the lambda function takes implement items(). This function takes flowerList and its lambda body takes flower parameter which represents each item in the flowerList. And in the lambda body of items() function, FlowerCard composable function is called which takes a flower data class as a parameter and a padding modifier with 8 dp as a parameter.

To learn about Content Padding, check out the last section of my post LazyColumn.

Well, that’s all for jetpack compose LazyRow. And I am providing a GitHub link to all code that we discussed in this post.

https://github.com/kalactor/LazyRowForWebsite.git

Learn more about lists and grids at Official Documentation.