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)
)
}
}
