When displaying groups of elements, we generally use columns and rows. But when it comes to displaying long lists, compose provides efficient alternatives like LazyColumn and LazyRow, which only render visible items in the screen.
This lazy loading approach improves performance and reduces memory consumption.
Before implementing Nested LazyColumn, let’s briefly go through some basics about available components to render large list.
I. LazyColumn & LazyRow
When rendering large datasets, we often use LazyColumn for vertical arrangements and LazyRow for horizontal.
Similar to RecyclerView, it support reverse layout, orientation adjustment, multiple view types, etc.
LazyColumn and LazyRow provide an itemsIndexed function that allows us to access the index number of each item in the list.
LazyColumn { itemsIndexed(items = dataList) { index, data ->
if (index == 0) {
}else{
} } }
Unique ID for LazyList
The key parameter in the LazyList ensures that each item in the list has a stable and unique key, which is essential for efficient list updates and performance optimization.
If we want to display different view types, such as headers, footers, or items with distinct UI representations, we can use the index or check view-type from the list to display it accordingly.
LazyColumn { itemsIndexed(items = dataList) { index, data ->
if (index == 0) { HeroCard(data) } else { when (data.categoryType) {
With Compose, we can easily create grids using the Grid composable and its variants, such as LazyVerticalGrid and LazyHorizontalGrid with lazy loading capabilities.
We can define rows and columns in a grid by using the following types:
columns for LazyVerticalGrid and rows for LazyHorizontalGrid
— Adaptive: Adjusts the size of rows or columns based on content and available space.
Core concepts of Composables and its helping hands — Episode III
We have used Composable in the last episodes of the Jetpack Compose Series. Now, Let’s see what happens under the hood.
When we annotate @Composable we tell the Compose compiler that this function is meant to convert data into UI elements. This rendering process happens in three key phases:
Composition: Determines what UI elements to display. Compose execute composable functions to create a blueprint of UI.
Layout: Determines where to position UI elements. This phase includes measurement and placement steps, where elements are sized and positioned within a 2D coordinate system.
Drawing: Renders the UI elements onto a Canvas/ Device Screen.
SwiftUI v/s Jetpack Compose was originally published in Kt. Academy on Medium, where people are continuing the conversation by highlighting and responding to this story.
✳ Sarthak offered us a completely new topic. We are so glad we could help him with publishing on our website. Would you like to share with us something interesting you have written? Write to kasia@kt.academy 📧 More articles coming soon! 📝
Be or not to be? Code or No-code? written by Marcin Moskała 💭 👉 Code or No-code?
❗ Kotlin Coroutines open workshop ❗ Registration is still open!