In this tutorial, we will learn some practical usages of Jetpack Compose LazyColumn, a UI component in the Jetpack Compose toolkit that allows you to efficiently display a scrollable list of items in a vertically scrolling column. It’s similar to Recyclerview in the classic Android View system. It is designed to efficiently handle large data lists by only rendering the currently visible items on the screen rather than rendering them all at once. It has slots for items, items & items indexed.
The item slot accepts a Composable that it displays once, and you can use it to display an item that should appear once in the list, such as section headers. The items slot is used to display repeatable items.
Just like with Recyclerview, you still need to create a layout for how each item in the list should be displayed. You pass this Composable to LazyColumn and manages uses it to display each item in the list. As the user scrolls through the list, LazyColumn updates the UI by recycling previously created components to display new items that become visible. This is similar to the custom layout XML you needed to provide to the ViewHolder in RecylerverView.
In this tutorial, we will use LazyColumn to display a list of mock Tasks, as shown in Figure 1.
We only require a few lines of code to display the above list with LazyColumn, as shown in Code Snippet 1
As you can see, a list of sample tasks was passed to the items slot of LazyColumn, and it loops through that list and calls the TaskCard with each task. TaskCard is composable that creates the layout for each item. It accepts a TaskModel object. Code sample 2 shows this data class.
To complete the TaskCard, add a Column layout to the Card and three rows inside the empty Column. The first row contains Text for the task title and a checkbox to mark the task as complete. The checkbox and text are wrapped with a toggleable row so the user can check a task by touching anywhere in the row. The first row is shown in Code Sample 5
The next row contains date and time text and icons. We use Spacer to separate the two rows vertically like so Spacer(modifier = Modifier.height(4.dp)). Add the next Row shown in Code Sample 6. Notice the user of Spacer again to separate the time and date values.
We need sample data to display on the LazyColumn list I create a list of dummy tasks that you can get from in this Gihub gist.
Passing Data to LazyColumn
As shown in Code Sample 1, we can just pass a list of data to LazyColumn. If the composable containing the list is called ProntoList, we can simply call it like this and get the checked item in the lambda.
Code Sample 10: Sample ViewModel to back LazyColumn
Overall, Jetpack Compose LazyColumn provides a powerful and efficient way to display large amounts of data in a scrollable list, making it a valuable tool for creating complex UI layouts in modern Android app development. You can download the example source code from Github.
I am a family-first Software Engineer and Creator. I create mobile-first apps that grow businesses and increase efficiency. I learn and share my journey figuring out the money side of code. It is written "Man shall not live by code alone"
Never miss a good story!
Subscribe to our newsletter to keep up with the latest trends!