Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lazy Layouts in Jetpack Compose

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!

Beatrice Kinya

November 17, 2022

More Decks by Beatrice Kinya

Other Decks in Technology


  1. 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.
  2. LazyListState - Controls and observe scrolling. - Properties - state.firtsVisibleItemIndex

    - state.firstVisibleItemScrollOffset - state.layoutInfo.visibleItemsInfo - state.layoutInfo.totalItemsCount - Methods - scrollToItem(index: Int) - animatedScrollToItem(index:Int)
  3. Large Paged Content - Use collectAsLazyPagingItems() extension function. - Pass

    the returned LazyPagingItems to items() in the LazyColumn.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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