Lazy Layouts in Jetpack Compose

Using State to Scroll to the Top of the List

In the same file, look for the //TODO: Show button when index is bigger than the first comment and replace it with the following code:

AnimatedVisibility(visible = showScrollToTop.value) {
  ScrollToTop(state = lazyListState)
}

The AnimateVisibility composable is responsible for making the scrolling animation, depending on the value of the showScrollToTop variable. The content inside is a simple button that will emit the scroll event when it’s clicked.

In the same file, look for the ScrollToTop composable and find the //TODO: Animate list state to the first index comment. Replace it with the following code:

coroutineScope.launch {
  state.animateScrollToItem(index = 0)
}

You’re using the coroutineScope to do the animation. As you may notice, the state has access to a method that allows animating an item by index. So for this example, you’ll push to the top, which means scroll to index 0.

Build and run. Here’s what you’ll see:

How exciting! The basic functionality of the app is done. The animation is smooth and clean, and it looks awesome. Now you have a better understanding of how to manage the state of Lazy composables.

Performance Concerns with Lazy Composables

Performance is a key piece of any software — including mobile apps. Taking the time to care about the small details during your development process could make a great difference in how your users experience your app. So in this section, you’re going to learn some tips on how to improve the performance of your Lazy composables.

Adding Keys to List Items

The first tip is a classic improvement for any group of indexed data — like lists or grids. The item’s key permits every item inside a list to have a unique identifier. This provides a lot of improvements — especially if you want to reorder the list, animate some items, do some tests on the list, and much more. Just remember that for now, this is only available for LazyRow and LazyColumn, not for grids.

Open the CatFeedScreen.kt file, and go to the LazyListCats composable. Add this line inside the items method:

items(
    cats,
    // Add a key for every item
    key = { it.id },
) {
  CatItem(cat = it)
}

By adding the code above, every item in the list now has a key represented by it’s unique id.

Avoiding Operations Inside of Composables

Another way to improve the app performance is to avoid doing some operations inside the composables. Operations like validations, assertions and others should move away from the composable body — instead, take advantage of the remember method.

In the same CatFeedScreen.kt file, look for the //TODO: Use remember for showGrid comment and replace it with the following code:

val drawableIcon = remember(showGrid) {
  if (showGrid) {
    R.drawable.ic_baseline_list_24
  } else {
    R.drawable.ic_baseline_grid_on_24
  }
}

Using remember allows that the drawableIcon will change only when the showGrid parameter changes, and not every time the layout is recomposed — making that component incredibly more efficient.

Finally, replace the code block that’s inside the painterResource property inside the Icon composable with the drawableIcon variable, like this:

painterResource(id = drawableIcon),

You’re done! The app’s appearance won’t change much from the previous step, but you made a lot of improvements in its performance. This could make the difference between a 4-star and 5-star app, so always take it into account.

Where to Go From Here

Download the completed project files by clicking the Download Materials button at the top or bottom of the tutorial.

In this article, you learned about :

• How Lazy composables work under the hood.
• The different types of Lazy composables available.
• How to use Lazy composables in your app.
• The different kinds of properties the Lazy composables offer.
• How to manage the LazyListState object and develop amazing features.
• Performance tips for Lazy composables.

To learn more, take a look at resources like the Jetpack Compose by Tutorial book and Jetpack Compose Video Course.

We hope you enjoyed this tutorial. If you have any questions or comments, please join the forum discussion below!