Jetpack Compose LazyColumn

Jetpack Compose LazyColumn is a vertically scrolling list component that efficiently renders only the items currently visible on screen. Unlike the traditional RecyclerView, Jetpack Compose LazyColumn simplifies list creation with a declarative approach, eliminating the need for adapters and view holders. The Jetpack Compose LazyColumn component is designed to handle large datasets efficiently while providing smooth scrolling performance.

Key Properties of Jetpack Compose LazyColumn

1. State Management in Jetpack Compose LazyColumn

Jetpack Compose LazyColumn integrates seamlessly with Compose's state management system. Here's a quick example:

val listItems = remember { mutableStateOf(List(100) { "Item $it" }) }  
  
LazyColumn {  
    items(listItems.value) { item ->  
        Text(  
            text = item,  
            modifier = Modifier.padding(16.dp)  
        )  
    }  
}  

The LazyColumn automatically updates when the list state changes, providing reactive UI updates without manual intervention.

2. Content Padding in Jetpack Compose LazyColumn

Jetpack Compose LazyColumn allows you to add padding around the entire content using the contentPadding parameter:

LazyColumn(  
    contentPadding = PaddingValues(  
        start = 16.dp,  
        top = 8.dp,  
        end = 16.dp,  
        bottom = 8.dp  
    )  
) {  
    items(100) { index ->  
        Text("Item #$index", Modifier.padding(8.dp))  
    }  
}  

This padding applies to the entire list content rather than individual items, making it perfect for accommodating system insets or design requirements.

3. Item Spacing in Jetpack Compose LazyColumn

The Jetpack Compose LazyColumn provides multiple ways to add spacing between items:

LazyColumn(  
    verticalArrangement = Arrangement.spacedBy(8.dp)  
) {  
    items(100) { index ->  
        Text("Item #$index")  
    }  
}  

The verticalArrangement parameter with Arrangement.spacedBy() creates consistent spacing between all items in the LazyColumn.

4. Scrolling States and Control in Jetpack Compose LazyColumn

Jetpack Compose LazyColumn gives you fine-grained control over scrolling behavior:

val lazyListState = rememberLazyListState()  
val coroutineScope = rememberCoroutineScope()  
  
LazyColumn(state = lazyListState) {  
    items(100) { index ->  
        Text("Item #$index", Modifier.padding(16.dp))  
    }  
}  
  
Button(  
    onClick = {  
        coroutineScope.launch {  
            // Scroll to item at position 10  
            lazyListState.animateScrollToItem(10)  
        }  
    }  
) {  
    Text("Scroll to item #10")  
}  

The rememberLazyListState() function creates a state object that tracks scrolling position and provides methods for programmatic scrolling.

5. Item Keys in Jetpack Compose LazyColumn

Jetpack Compose LazyColumn supports item keys for efficient updates and animations:

data class Person(val id: Int, val name: String)  
  
val people = List(100) { Person(it, "Person $it") }  
  
LazyColumn {  
    items(  
        items = people,  
        key = { person -> person.id }  
    ) { person ->  
        Text(person.name, Modifier.padding(16.dp))  
    }  
}  

Providing a key function helps Jetpack Compose LazyColumn identify which items have changed, moved, or been removed, enabling more efficient updates and animations.

6. Sticky Headers in Jetpack Compose LazyColumn

Jetpack Compose LazyColumn supports sticky headers that remain at the top during scrolling:

LazyColumn {  
    stickyHeader {  
        Text(  
            "Sticky Header",  
            modifier = Modifier  
                .fillMaxWidth()  
                .background(MaterialTheme.colorScheme.primary)  
                .padding(16.dp),  
            color = MaterialTheme.colorScheme.onPrimary  
        )  
    }  
      
    items(100) { index ->  
        Text("Item #$index", Modifier.padding(16.dp))  
    }  
}  

Sticky headers in Jetpack Compose LazyColumn are perfect for section titles or category headers that should remain visible while scrolling through a section.

7. Loading More Items in Jetpack Compose LazyColumn

Implement infinite scrolling in Jetpack Compose LazyColumn with the onReachEnd callback:

val lazyListState = rememberLazyListState()  
val isLoading = remember { mutableStateOf(false) }  
val items = remember { mutableStateOf(List(20) { "Initial Item $it" }) }  
  
LaunchedEffect(lazyListState) {  
    snapshotFlow { lazyListState.layoutInfo.visibleItemsInfo }  
        .collect { visibleItems ->  
            // Check if last item is visible  
            if (!isLoading.value &&   
                visibleItems.any { it.index == items.value.size - 1 }) {  
                isLoading.value = true  
                // Simulate loading more items  
                delay(1000)  
                val newItems = List(10) { "New Item ${items.value.size + it}" }  
                items.value = items.value + newItems  
                isLoading.value = false  
            }  
        }  
}  
  
LazyColumn(state = lazyListState) {  
    items(items.value) { item ->  
        Text(item, Modifier.padding(16.dp))  
    }  
      
    if (isLoading.value) {  
        item {  
            CircularProgressIndicator(  
                modifier = Modifier  
                    .fillMaxWidth()  
                    .padding(16.dp)  
                    .wrapContentWidth(Alignment.CenterHorizontally)  
            )  
        }  
    }  
}  

This pattern allows Jetpack Compose LazyColumn to load additional items when the user scrolls near the end of the list, providing a seamless infinite scrolling experience.

Complete Example of Jetpack Compose LazyColumn

Here's a full implementation of a Jetpack Compose LazyColumn with various features:

Example 1

import androidx.compose.foundation.background  
import androidx.compose.foundation.clickable  
import androidx.compose.foundation.layout.*  
import androidx.compose.foundation.lazy.LazyColumn  
import androidx.compose.foundation.lazy.items  
import androidx.compose.foundation.lazy.rememberLazyListState  
import androidx.compose.material3.*  
import androidx.compose.runtime.*  
import androidx.compose.ui.Alignment  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.graphics.Color  
import androidx.compose.ui.text.font.FontWeight  
import androidx.compose.ui.unit.dp  
import androidx.compose.ui.unit.sp  
import kotlinx.coroutines.launch  
  
@Composable  
fun JetpackComposeLazyColumnDemo() {  
    val coroutineScope = rememberCoroutineScope()  
    val lazyListState = rememberLazyListState()  
      
    // Sample data  
    data class Contact(val id: Int, val name: String, val phone: String)  
      
    val alphabet = ('A'..'Z').toList()  
    val contacts = remember {  
        alphabet.flatMap { letter ->  
            List(5) { index ->  
                Contact(  
                    id = letter.code * 100 + index,  
                    name = "$letter Name $index",  
                    phone = "555-${letter.code}-${1000 + index}"  
                )  
            }  
        }.sortedBy { it.name }  
    }  
      
    // Group contacts by first letter  
    val groupedContacts = contacts.groupBy { it.name.first() }  
      
    // Selected contact state  
    var selectedContact by remember { mutableStateOf<Contact?>(null) }  
      
    Column(modifier = Modifier.fillMaxSize()) {  
        // Show selected contact details  
        selectedContact?.let { contact ->  
            Card(  
                modifier = Modifier  
                    .fillMaxWidth()  
                    .padding(16.dp),  
                elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)  
            ) {  
                Column(modifier = Modifier.padding(16.dp)) {  
                    Text(  
                        text = contact.name,  
                        fontSize = 20.sp,  
                        fontWeight = FontWeight.Bold  
                    )  
                    Spacer(modifier = Modifier.height(8.dp))  
                    Text(text = "Phone: ${contact.phone}")  
                    Spacer(modifier = Modifier.height(8.dp))  
                    Button(  
                        onClick = { selectedContact = null },  
                        modifier = Modifier.align(Alignment.End)  
                    ) {  
                        Text("Close")  
                    }  
                }  
            }  
        }  
          
        // Quick scroll buttons  
        Row(  
            modifier = Modifier  
                .fillMaxWidth()  
                .horizontalScroll(rememberScrollState())  
                .padding(8.dp),  
            horizontalArrangement = Arrangement.spacedBy(4.dp)  
        ) {  
            alphabet.forEach { letter ->  
                if (groupedContacts.containsKey(letter)) {  
                    Button(  
                        onClick = {  
                            coroutineScope.launch {  
                                // Find the position of the first item that starts with this letter  
                                val position = contacts.indexOfFirst { it.name.startsWith(letter) }  
                                if (position >= 0) {  
                                    lazyListState.animateScrollToItem(  
                                        index = position + groupedContacts.keys  
                                            .filter { it < letter }  
                                            .count() // Add the number of headers before this section  
                                    )  
                                }  
                            }  
                        },  
                        modifier = Modifier.size(40.dp),  
                        contentPadding = PaddingValues(0.dp)  
                    ) {  
                        Text(letter.toString())  
                    }  
                }  
            }  
        }  
          
        // LazyColumn with contacts  
        LazyColumn(  
            state = lazyListState,  
            modifier = Modifier.fillMaxSize(),  
            contentPadding = PaddingValues(bottom = 16.dp),  
            verticalArrangement = Arrangement.spacedBy(1.dp)  
        ) {  
            groupedContacts.forEach { (letter, contactsInGroup) ->  
                stickyHeader {  
                    Box(  
                        modifier = Modifier  
                            .fillMaxWidth()  
                            .background(MaterialTheme.colorScheme.primaryContainer)  
                            .padding(8.dp)  
                    ) {  
                        Text(  
                            text = letter.toString(),  
                            style = MaterialTheme.typography.titleMedium,  
                            color = MaterialTheme.colorScheme.onPrimaryContainer,  
                            fontWeight = FontWeight.Bold  
                        )  
                    }  
                }  
                  
                items(  
                    items = contactsInGroup,  
                    key = { it.id }  
                ) { contact ->  
                    ListItem(  
                        headlineContent = { Text(contact.name) },  
                        supportingContent = { Text(contact.phone) },  
                        modifier = Modifier  
                            .clickable { selectedContact = contact }  
                            .padding(horizontal = 16.dp, vertical = 8.dp)  
                    )  
                    Divider(color = Color.LightGray, thickness = 0.5.dp)  
                }  
            }  
        }  
    }  
}  
  
// Add this to your app  
@Composable  
fun MyApp() {  
    MaterialTheme {  
        Surface(  
            modifier = Modifier.fillMaxSize(),  
            color = MaterialTheme.colorScheme.background  
        ) {  
            JetpackComposeLazyColumnDemo()  
        }  
    }  
}  

This complete example demonstrates a contacts app using Jetpack Compose LazyColumn with:

• Grouped contacts with sticky headers
• Quick navigation buttons
• Item selection and detail display
• Proper state management
• Smooth scrolling animations

To use this code, you'll need the following dependencies in your build.gradle file:

dependencies {  
    implementation "androidx.compose.ui:ui:1.5.0"  
    implementation "androidx.compose.material3:material3:1.1.0"  
    implementation "androidx.compose.foundation:foundation:1.5.0"  
    implementation "androidx.compose.runtime:runtime:1.5.0"  
    implementation "androidx.activity:activity-compose:1.7.0"  
}  

Example 2

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch

@Composable
fun LazyColumnExample() {
// Create some sample data
data class Item(
val id: Int,
val title: String,
val description: String,
var isFavorite: Boolean = false
)

val items = remember {  
    mutableStateListOf<Item>().apply {  
        repeat(50) { index ->  
            add(  
                Item(  
                    id = index,  
                    title = "Item $index",  
                    description = "This is a detailed description for item $index. " +  
                            "It contains multiple lines of text to demonstrate how LazyColumn " +  
                            "handles multiline content in each item.",  
                    isFavorite = index % 5 == 0  
                )  
            )  
        }  
    }  
}  

// LazyListState to control scrolling behavior  
val lazyListState = rememberLazyListState()  
val coroutineScope = rememberCoroutineScope()  

// Track selected item  
var selectedItemId by remember { mutableStateOf<Int?>(null) }  

Column(modifier = Modifier.fillMaxSize()) {  
    // Header section with scroll controls  
    Column(  
        modifier = Modifier  
            .fillMaxWidth()  
            .background(MaterialTheme.colorScheme.primaryContainer)  
            .padding(16.dp)  
    ) {  
        Text(  
            text = "Jetpack Compose LazyColumn Demo",  
            fontSize = 20.sp,  
            fontWeight = FontWeight.Bold,  
            color = MaterialTheme.colorScheme.onPrimaryContainer  
        )  

        Spacer(modifier = Modifier.height(8.dp))  

        // Scroll control buttons  
        Row(  
            modifier = Modifier.fillMaxWidth(),  
            horizontalArrangement = Arrangement.SpaceBetween  
        ) {  
            Button(  
                onClick = {  
                    coroutineScope.launch {  
                        // Scroll to top  
                        lazyListState.animateScrollToItem(0)  
                    }  
                }  
            ) {  
                Text("Scroll to Top")  
            }  

            Button(  
                onClick = {  
                    coroutineScope.launch {  
                        // Scroll to middle  
                        lazyListState.animateScrollToItem(items.size / 2)  
                    }  
                }  
            ) {  
                Text("Scroll to Middle")  
            }  

            Button(  
                onClick = {  
                    coroutineScope.launch {  
                        // Scroll to bottom  
                        lazyListState.animateScrollToItem(items.size - 1)  
                    }  
                }  
            ) {  
                Text("Scroll to Bottom")  
            }  
        }  
    }  

    // Selected item details  
    selectedItemId?.let { id ->  
        val selectedItem = items.find { it.id == id }  
        selectedItem?.let {  
            Card(  
                modifier = Modifier  
                    .fillMaxWidth()  
                    .padding(16.dp),  
                elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)  
            ) {  
                Column(  
                    modifier = Modifier  
                        .fillMaxWidth()  
                        .padding(16.dp)  
                ) {  
                    Text(  
                        text = it.title,  
                        fontSize = 18.sp,  
                        fontWeight = FontWeight.Bold  
                    )  
                      
                    Spacer(modifier = Modifier.height(8.dp))  
                      
                    Text(text = it.description)  
                      
                    Spacer(modifier = Modifier.height(8.dp))  
                      
                    Row(  
                        modifier = Modifier.fillMaxWidth(),  
                        horizontalArrangement = Arrangement.End  
                    ) {  
                        Button(  
                            onClick = { selectedItemId = null }  
                        ) {  
                            Text("Close")  
                        }  
                    }  
                }  
            }  
        }  
    }  

    // Main LazyColumn with different properties demonstrated  
    LazyColumn(  
        state = lazyListState,  
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),  
        verticalArrangement = Arrangement.spacedBy(8.dp),  
        modifier = Modifier.fillMaxSize()  
    ) {  
        // Header item  
        item {  
            Text(  
                text = "Header",  
                modifier = Modifier  
                    .fillMaxWidth()  
                    .background(MaterialTheme.colorScheme.secondaryContainer)  
                    .padding(16.dp),  
                fontSize = 16.sp,  
                fontWeight = FontWeight.Bold,  
                color = MaterialTheme.colorScheme.onSecondaryContainer  
            )  
        }  

        // Sticky header  
        stickyHeader {  
            Surface(  
                modifier = Modifier.fillMaxWidth(),  
                color = MaterialTheme.colorScheme.primary  
            ) {  
                Text(  
                    text = "Sticky Header - Always Visible While Scrolling",  
                    modifier = Modifier.padding(16.dp),  
                    color = MaterialTheme.colorScheme.onPrimary,  
                    fontWeight = FontWeight.Bold  
                )  
            }  
        }  

        // Items with index  
        itemsIndexed(  
            items = items,  
            key = { _, item -> item.id } // Using key for better performance and animations  
        ) { index, item ->  
            Card(  
                modifier = Modifier  
                    .fillMaxWidth()  
                    .clickable { selectedItemId = item.id },  
                elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)  
            ) {  
                Column(  
                    modifier = Modifier  
                        .fillMaxWidth()  
                        .padding(16.dp)  
                ) {  
                    Row(  
                        modifier = Modifier.fillMaxWidth(),  
                        horizontalArrangement = Arrangement.SpaceBetween,  
                        verticalAlignment = Alignment.CenterVertically  
                    ) {  
                        Text(  
                            text = "Position $index: ${item.title}",  
                            fontWeight = FontWeight.Bold,  
                            fontSize = 16.sp  
                        )  
                          
                        IconButton(  
                            onClick = {  
                                items[index] = item.copy(isFavorite = !item.isFavorite)  
                            }  
                        ) {  
                            Icon(  
                                imageVector = if (item.isFavorite) Icons.Filled.Favorite else Icons.Filled.Star,  
                                contentDescription = "Toggle Favorite",  
                                tint = if (item.isFavorite) Color.Red else Color.Gray  
                            )  
                        }  
                    }  
                      
                    Spacer(modifier = Modifier.height(4.dp))  
                      
                    Text(  
                        text = item.description,  
                        maxLines = 2,  
                        overflow = TextOverflow.Ellipsis  
                    )  
                }  
            }  
        }  

        // Footer item  
        item {  
            Box(  
                modifier = Modifier  
                    .fillMaxWidth()  
                    .padding(16.dp),  
                contentAlignment = Alignment.Center  
            ) {  
                Text(  
                    text = "End of List - ${items.size} items total",  
                    color = Color.Gray  
                )  
            }  
        }  
    }  
}  

}

// For use in a standard Compose app:
@Composable
fun LazyColumnApp() {
MaterialTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
LazyColumnExample()
}
}
}

// Required dependencies in build.gradle:
implementation "androidx.compose.ui:ui:1.5.4"
implementation "androidx.compose.material3:material3:1.1.2"
implementation "androidx.compose.foundation:foundation:1.5.4"
implementation "androidx.compose.material:material-icons-extended:1.5.4"
implementation "androidx.activity:activity-compose:1.8.1"

For the latest Jetpack Compose versions and documentation, visit the official Jetpack Compose website.

By implementing Jetpack Compose LazyColumn in your applications, you can create efficient, responsive lists with significantly less code than traditional RecyclerView implementations. The declarative nature of Jetpack Compose LazyColumn makes it easier to understand, maintain, and modify your list implementations while providing excellent performance for your Android applications.​​​​​​​​​​​​​​​​