Lazy List in Jetpack Compose
Lazy Lists in Jetpack Compose using the LazyRow and LazyColumn composable. In this reading, you will learn about retaining the state of the Lazy Lists even after the orientation changes.
🟢 ANDROID WITH MACHINE LEARNING! (COURSE)
🟢 KOTLIN INTERVIEW BOOTCAMP! (COURSE)
Defining LazyRowRememberedState Composable with rememberLazyListState()
To retain the state of the LazyRow after the orientation changes, you need to create a LazyListState that is remembered across compositions. Below is an example code for setting the state of a LazyColumn to the rememberLazyListState().
@Composable
fun LazyRowRememberedState() {
LazyRow(state = rememberLazyListState()) {
items(5000) {
MyCard(number = it)
}
}
} @Composable
fun MyCard(number:Int) {
Card(
elevation = 16.dp,
modifier = Modifier.padding(16.dp)
) {
Text(
text = number.toString(),
fontSize = 22.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
)
}
}
@Composable
fun MyCard(number:Int) {
Card(
elevation = 16.dp,
modifier = Modifier.padding(16.dp)
) {
Text(
text = number.toString(),
fontSize = 22.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
)
}
} Note: that rememberLazyListState() function creates a LazyListState that is remembered across recompositions.
When you want to retain the state of the LazyColumn after the orientation changes like the LazyRow, you need to create a LazyListState that is remembered across recompositions. Below is an example code for setting the state of a LazyColumn to remember LazyListState().
Defining LazyColumnRememberedState Composable with rememberLazyListState()
When you want to retain the state of the LazyColumn after the orientation changes like the LazyRow, you need to create a LazyListState that is remembered across recompositions. Below is an example code for setting the state of a LazyColumn to rememberLazyListState().
@Composable
fun LazyColumnRememberedState() {
LazyColumn(state = rememberLazyListState()) {
items(5000) {
MyCard(number = it)
}
}
} @Composable
fun MyCard(number:Int) {
Card(
elevation = 16.dp,
modifier = Modifier.padding(16.dp)
) {
Text(
text = number.toString(),
fontSize = 22.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
)
}
} Nested Scrolling Lazy Layouts
Previously in this course, you learned that nested scrolling can be applied to a scrollable Column and a scrollable Row. Jetpack Compose also supports nested scrolling for LazyRow and LazyColumn. Below is an example of the LazyRow inside the LazyColumn.
@Composable
fun LazyColumnRememberedState() {
LazyColumn(state = rememberLazyListState()) {
item { LazyRowRememberedState() }
items(1000) {
MyCard(number = it)
}
}
}@Composable
fun LazyRowRememberedState() {
LazyRow(state = rememberLazyListState()) {
items(1000) {
MyCard(number = it)
}
}
} @Composable
fun MyCard(number:Int) {
Card(
elevation = 16.dp,
modifier = Modifier.padding(16.dp)
) {
Text(
text = number.toString(),
fontSize = 22.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
)
}
}Conclusion
In this reading, you learned about retaining the state of the LazyRow and LazyColumn. You also learned about rememberLazyListState function, orientation changes and nested layouts.
🎉
