Lazy Layouts in Jetpack Compose

One of the most common features of mobile apps is they display data, such as feeds on a social medial app, or a playlist of favorite songs on Spotify. In Android View, developers used the now-deprecated ListView, and RecyclerView later to show large lists of data.

Jetpack compose, using lazy layouts, provides a modern, easy, and efficient solution to display a large list of data. With less code, you can implement lists or grids in an Android app. No more adapter classes or XML code😊.

In this talk, we’ll go through implementing lazy lists and grids in Jetpack Compose, adding items, and animating lists content. We’ll also look at handling state on lazy layouts. Finally, we’ll look at optimization tips and performance concerns with lazy layouts.

Happy Composing!

Transcript

1. Beatrice Kinya Android Engineer @ Kyosk Digital Android Author @ kodeco.com @B__Kinya | Beatrice Kinya
2. Lazy Layouts in Jetpack Compose Android, Kotlin, Jetpack
3. RecyclerView
5. Jetpack Compose
6. Rendering lists LazyColumn LazyRow
7. Adding list of items
8. LazyListScope DSL provides the following methods:
9. Arranging Content in the Layout - Arrangement.spaceBy - Content padding Vs Modifier.padding
10. Content Padding Vs Modifier.Padding - Modifier.padding() clips the first and the last item . - It adds padding to start and end of every item, clipping content to remain within the bounds of LazyColumn or LazyRow padding. - Use contentPadding to avoid clipping clipping. - contentPadding adds padding around the whole. It will add padding to the first and last item in the list.
11. LazyListState - Controls and observe scrolling. - Properties - state.firtsVisibleItemIndex - state.firstVisibleItemScrollOffset - state.layoutInfo.visibleItemsInfo - state.layoutInfo.totalItemsCount - Methods - scrollToItem(index: Int) - animatedScrollToItem(index:Int)
12. Lazy Grids
13. LazyGrids - For a responsive layout across different screen sizes. - LazyVerticalGrid - LazyHorizontalGrid
14. Custom Grids
15. - Implement GridCells interface.
16. Customizing grids - Span attribute
17. Large Data Sets
18. Large Paged Content - Use collectAsLazyPagingItems() extension function. - Pass the returned LazyPagingItems to items() in the LazyColumn.
19. Tips when using Lazy Layouts
20. Avoid 0-pixel sized items - The lazy layout will compose all in the first measurement as it can fit all of them in the viewport. - Once items are loaded their height is expanded. - Lazy layout will discard all the items that were unnecessarily composed the first time as they cannot fit the viewport. - To avoid this, set default sizing of the items so that the lazy layout can do correct calculation of number of items to fit in the viewport the first time. - This will help maintain scroll position.
22. Avoid nesting items scrollable in the same direction - Applies when nesting scrollable children without a predefined size in the same direction e.g. LazyColumn inside a Column - Consider using just a LazyColumn and its DSL to pass in different content types.
24. Avoid nesting items scrollable in the same direction - Okay: Nesting in different directions e.g. LazyColumn inside a Row. - Okay: Nesting in same directions when children have a fixed size.
25. Avoid putting multiple elements in one item. Do not 🤫
26. Consider custom arrangement - Implement custom Arrangement and pass it to the LazyColumn or LazyRow.
27. Consider adding content types - Starting compose 1.2, you can add contentType to your lists and grids. - When contentType is provided compose reuses compositions for items of the same type.
28. Measuring performance - Measure performance of Lazy layouts on release mode, and when R8 optimisation is enabled.
29. Resources - Lists and Grids(Docs): https://developer.android.com/jetpack/compose/lists#lazy-layouts-tips - Custom Lazy Grid Layout https://www.valueof.io/blog/lazy-grids-gridcells-fixed-adaptive-custom-compose
30. Questions?