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