Jetpack Compose: Getting Started

Aug 1 2023 · Kotlin 1.8.10, Android 13, Android Studio Flamingo

Part 3: Jetpack Controls

16. Display Lists Using Lazy Layouts

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 15. Using a Scaffold Layout Next episode: 17. State Management in Jetpack Compose

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

In many scenarios, you may want to display a collection of items onto a screen. This can usually be achieved with using either a Column or Row Composable.

Displaying a list of items

Let us try to add a list of items using a Row Composable.

@Composable
fun FoodList() {
    Row(modifier = Modifier
        .fillMaxWidth()
        .horizontalScroll(state = rememberScrollState())) {

        getFood().forEach {
            FoodItem(food = it)
        }

    }
}

Displaying a list of items

Let us try to add a list of items using a LazyColumn Composable.

@Composable
fun FoodList() {

    LazyColumn(modifier = Modifier
        .fillMaxHeight()){

        items(getFood()) { food ->
            FoodItem(food = food)
        }

    }

}

@Composable
fun FoodList() {

    LazyRow(modifier = Modifier
        .fillMaxWidth()){

        items(getFood()) { food ->
            FoodItem(food = food)
        }

    }

}

Lazy Grids

In addition to LazyColumn and LazyRow, there are also LazyVerticalGrid and LazyHorizontalGrid Composables.

Displaying a grid of items

Let us try to add a grid of items using a LazyVerticalGrid Composable.

LazyVerticalGrid(
      columns = GridCells.Fixed(2), ){
        items(getFood()){ food ->
            FoodItem(food = food)
        }
  }

Content Padding

By default, the items in a LazyColumn or LazyRow will be placed edge to edge.

Content Padding

Let us try to add some padding around the items in a LazyVerticalGrid Composable.

LazyVerticalGrid(
      columns = GridCells.Fixed(2),
      contentPadding = PaddingValues(16.dp)
  ){
        items(getFood()){ food ->
            FoodItem(food = food)
        }
  }

Content Spacing

In order to add some spacing between the items in a LazyColumn or LazyRow, you can use the verticalArrangement and horizontalArrangement parameters.

Content Spacing

Let us try to add some spacing between the items in a LazyVerticalGrid Composable.

LazyVerticalGrid(
      columns = GridCells.Fixed(2),
      contentPadding = PaddingValues(16.dp),
      verticalArrangement = Arrangement.spacedBy(16.dp)
  ){
        items(getFood()){ food ->
            FoodItem(food = food)
        }
  }

Item Keys

By default, each item in a Lazy layout will be referenced by its index in the list. This can cause issues if the list is updated, as the items will be re-arranged.

Item Keys

Let us try to add some keys to the items in a LazyVerticalGrid Composable.

LazyVerticalGrid(
      columns = GridCells.Fixed(2),
      contentPadding = PaddingValues(16.dp),
      verticalArrangement = Arrangement.spacedBy(16.dp)
  ){
        items(getFood(), key = { food -> food.id }){ food ->
            FoodItem(food = food)
        }
  }

Conclusion

In this lesson, we learned about the Lazy layouts in Jetpack Compose. We have been able to see how, by using Lazy layouts, we can display a list of items in a performant way.