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’re accessing parts of this content for free, with some sections shown as abpuwnidij text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as upgaqkidez text.

Unlock our entire catalogue of books and courses, 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.

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)
        }

    }
}

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)
        }

    }

}

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

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

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

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

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)
        }
  }

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

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)
        }
  }

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.

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)
        }
  }

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.