10. LazyColumn and LazyRow

Lazy composables

If you need to display a large number of items (or a list of an unknown length), using a layout such as Column can cause performance issues, since all the items will be composed and laid out whether or not they are visible.

Compose provides a set of components which only compose and lay out items which are visible in the component’s viewport. These components include LazyColumn and LazyRow.

LazyListScope.

LazyColumn - produces a vertically scrolling list LazyRow - produces a horizontal scrolling list

For Android developers, LazyColumn - Vertical RecyclerView LazyRow - Horizontal RecyclerView

LazyColumn

In LazyColumn you can add an item() or items() For single composable use item() For list of composable use items(count: Int) or items(items: List<T>)

 @Composable
fun ListListScopeSample(){
    LazyColumn {
        // Add a single item
        item {
            Text(text = "Header")
        }

        // Add 3 items
        items(3) { index ->
            Text(text = "First List items : $index")
        }

        // Add 2 items
        items(2) { index ->
            Text(text = "Second List Items: $index")
        }

        // Add another single item
        item {
            Text(text = "Footer")
        }
    }
}

Output:

1. SimpleList

private val countryList =
    mutableListOf("India", "Pakistan", "China", "United States")

private val listModifier = Modifier
    .fillMaxSize()
    .background(Color.Gray)
    .padding(10.dp)

private val textStyle = TextStyle(fontSize = 20.sp, color = Color.White)

@Composable
fun SimpleListView() {
    LazyColumn(modifier = listModifier) {
        items(countryList) { country ->
            Text(text = country, style = textStyle)
        }
    }
}

In this example, we use the list of countries and we iterate arrayList using items(items: List<T>)

Output:

2. Custom List

We will plan to display the list of fruit names with image.

Step 1: Create a data class

data class FruitModel(val name:String, val image : Int)

Step 2: Create a custom row (Composable funtion) To display the picture of fruit we use Image() To display the name we use Text() We use Row for place the Image() and Text() in horizontal order.

@Composable
fun ListRow(model: FruitModel) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .wrapContentHeight()
            .fillMaxWidth()
            .background("#063041".color)
    ) {
        Image(
            painter = painterResource(id = model.image),
            contentDescription = "",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(100.dp)
                .padding(5.dp)
        )
        Text(
            text = model.name,
            fontSize = 24.sp,
            fontWeight = FontWeight.SemiBold,
            color = Color.White
        )
    }
}

Step 3: Create a mutableList for add the list of fruit models

private val fruitsList = mutableListOf<FruitModel>()

Step 4: Add items to the list

fruitsList.add(FruitModel("Apple", R.drawable.apple))
fruitsList.add(FruitModel("Orange", R.drawable.orange))
fruitsList.add(FruitModel("Banana", R.drawable.banana))
fruitsList.add(FruitModel("Strawberry", R.drawable.strawberry))
fruitsList.add(FruitModel("Mango", R.drawable.mango))

Note: I already added all drawables in my drawable folder. Step 5: Use LazyColumn to set the list

LazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.White)
) {
    items(fruitsList) { model ->
        ListRow(model = model)
    }
}

Output:

3. Content Padding

Sometimes you'll need to add padding around the edges of the content. The lazy components allow you to pass some PaddingValues to the contentPadding parameter to support this:

LazyColumn(
  contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
) {
    // ...
}

4. Content Spacing

To add spacing in-between items, you can use Arrangement.spacedBy(). The example below adds 4.dp of space in-between each item:

LazyRow(
   verticalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}

Output with Spacing and contentPadding