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
   

   View Slide

2. Lazy Layouts in
   Jetpack Compose
   Android, Kotlin, Jetpack
   

   View Slide

3. RecyclerView
   

   View Slide

4. View Slide

5. Jetpack Compose
   

   View Slide

6. Rendering lists
   LazyColumn LazyRow
   

   View Slide

7. Adding list of items
   

   View Slide

8. LazyListScope DSL provides the following methods:
   

   View Slide

9. Arranging Content in the Layout
   - Arrangement.spaceBy
   - Content padding Vs Modifier.padding
   

   View Slide

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.
    

    View Slide

11. LazyListState
    - Controls and observe scrolling.
    - Properties
    - state.firtsVisibleItemIndex
    - state.firstVisibleItemScrollOffset
    - state.layoutInfo.visibleItemsInfo
    - state.layoutInfo.totalItemsCount
    - Methods
    - scrollToItem(index: Int)
    - animatedScrollToItem(index:Int)
    

    View Slide

12. Lazy Grids
    

    View Slide

13. LazyGrids
    - For a responsive layout across different screen sizes.
    - LazyVerticalGrid
    - LazyHorizontalGrid
    

    View Slide

14. Custom Grids
    

    View Slide

15. - Implement GridCells interface.
    

    View Slide

16. Customizing grids
    - Span attribute
    

    View Slide

17. Large Data Sets
    

    View Slide

18. Large Paged Content
    - Use
    collectAsLazyPagingItems()
    extension function.
    - Pass the returned
    LazyPagingItems to items() in
    the LazyColumn.
    

    View Slide

19. Tips when using Lazy Layouts
    

    View Slide

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.
    

    View Slide

21. View Slide

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.
    

    View Slide

23. View Slide

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.
    

    View Slide

25. Avoid putting multiple elements in one item.
    Do not 🤫
    

    View Slide

26. Consider custom arrangement
    - Implement custom Arrangement
    and pass it to the LazyColumn or
    LazyRow.
    

    View Slide

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.
    

    View Slide

28. Measuring performance
    - Measure performance of Lazy layouts on release mode, and when R8 optimisation
    is enabled.
    

    View Slide

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
    

    View Slide

30. Questions?
    

    View Slide