Jetpack Compose LazyColumn: Efficient List Rendering with Examples

 Jetpack Compose - LazyColumn

When working with lists in Jetpack Compose, the LazyColumn is your go-to layout. It is optimized to render large lists efficiently by only composing the items visible on the screen. 

In this guide, we'll explore how to use LazyColumn, customize it, and implement dynamic lists in your Android app.

What is LazyColumn?

LazyColumn is a vertically scrollable list that renders its child items on demand. Unlike the standard Column, it ensures efficient memory usage by creating and disposing of items dynamically as the user scrolls.

Key Features of LazyColumn

• Efficient Rendering: Only renders visible items, saving memory and resources.
• Dynamic Data: Supports list data of any size, rendering items dynamically.
• Custom Layouts: Allows headers, footers, and mixed item types.

Basic Usage of LazyColumn

Here’s a basic example of a LazyColumn displaying a list of strings:

package com.boltuix.composedemo

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.boltuix.composedemo.R

/**
 * 🌟 LazyColumn Demo
 * A vertically scrolling list of items displayed as cards with an image and text.
 */
@Composable
fun LazyColumnDemo() {
    // Sample data for the LazyColumn
    val items = (1..20).map { "Item #$it" }

    LazyColumn(
        modifier = Modifier.fillMaxSize(), // Occupies the entire screen
        verticalArrangement = Arrangement.spacedBy(16.dp), // Adds space between items
        contentPadding = PaddingValues(16.dp) // Padding at the top and bottom
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier

                    .fillMaxWidth() // Makes the card occupy the full width
                    .height(150.dp), // Fixed height for each card
                shape = RoundedCornerShape(20.dp), // Adds rounded corners
                elevation = androidx.compose.material3.CardDefaults.cardElevation(8.dp)
            ) {
                Row(
                    modifier = Modifier
                        .padding(20.dp)
                        .fillMaxSize(),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Start
                ) {
                    // Image on the left side of the card
                    Image(
                        painter = painterResource(id = R.drawable.placeholder_image), // Replace with your drawable resource
                        contentDescription = null,
                        modifier = Modifier
                            .fillMaxHeight()
                            .width(100.dp), // Fixed width for the image
                        contentScale = ContentScale.Fit // Crops and scales the image
                    )

                    // Text on the right side of the card
                    Text(
                        text = item,
                        modifier = Modifier.padding(16.dp),
                        style = androidx.compose.material3.MaterialTheme.typography.bodyLarge
                    )
                }
            }
        }
    }
}

/**
 * 👀 Preview Function
 * Used to preview the LazyColumn layout in Android Studio.
 */
@Preview(showBackground = true)
@Composable
fun PreviewLazyColumnDemo() {
    LazyColumnDemo()
}

..

Understanding the Code

• Data Source:

A list of 50 items is generated using List(50) { "Item $it" }.

• LazyColumn:

Used to display the list. The items function renders each item dynamically.

• Item Styling:

Each item is styled with padding, font size, and weight for a clean look.

Customizing LazyColumn 

• Add Headers and Dividers

LazyColumn(
    modifier = Modifier.padding(16.dp)
) {
    item {
        Text(
            text = "Header",
            fontSize = 24.sp,
            fontWeight = FontWeight.ExtraBold,
            modifier = Modifier.padding(vertical = 8.dp)
        )
    }
    items(itemsList) { item ->
        Text(
            text = item,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(vertical = 8.dp)
        )
    }
    item {
        Text(
            text = "Footer",
            fontSize = 24.sp,
            fontWeight = FontWeight.ExtraBold,
            modifier = Modifier.padding(vertical = 8.dp)
        )
    }
}