15th Oct 2021

Building Lists in Jetpack Compose

Mobile App

Written By, Bhushan Maniyar

Overview

Hello Android Devs Greetings of the day,

As we know for listing data in android we have been using ListView or mostly RecyclerViews. But making a RecyclerView is time-consuming and it takes hell of a lot of code.

Now Jetpack compose is here to rescue developers by making it easy to display a list of data. And jetpack compose is also stable now so it is production-ready.

As we know for making RecyclerView we need to create layout files, Adapters, ViewHolders but in Compose it does not require that much code.

Different Control for Making List

To Display a List of data, we can use Column, Row, LazyColumn, LazyRow. These are the available controls in compose.

Column And Row

As we know in XML layout we used to have ListView which is used for the list of data and now in Compose, we have Column and Row for the same.

Column : Column is control where we can arrange our data in a vertical manner. The column takes several parameters in which we have one parameter which is Modifier. The modifier is a class that is used for formatting the field and layout. But we are looking to make the column Scrollable. So Modifier has one method which is verticleScroll() which takes a scrollable state. We can get a scrollable state from a method called remeberScrollState().

Output:


Row : Row is a control where we can arrange our data in a horizontal manner. And as we saw in the Column we can do the same thing with the Row with Modifier with horizontalScroll().

Output :


Row and Column are like ListView. They do not load data in a Lazy manner like RecyclerView. For this scenario, LazyColumn and LazyRow come into the picture.

LazyColumn, LazyRow & LazyVerticleGrid

Jetpack Compose provides LazyColumn, LazyRow, and LazyVerticleGrid in replacement of RecyclerView. These are too easy to implement & lightweight in comparison to RecyclerView.

LazyColumn

LazyColumn is a Composable function. With the help of LazyColumn, we can make a Vertical List which will load lazily.

  • Modifier: Modifier is a class that provides formatting attributes.
  • State: State in LazyList provides state of a list like a scroll position, firstVisibleItemIndex so on and so forth.
  • ContentPadding: It is a padding that applies to the first and last item in the list.
  • ReverseLayout: ReverseLayout attribute is used when we have to display the list in reverse order and it also loads the list in reverse order.
  • VerticalArrangement: Arrangement is a class that provides a variety of methods and attributes for Vertical Arrangement like Arrangement.Top, Arrangement.spacedBy(), etc..
  • HorizontalAlignment: Alignment is used to align the list in a horizontal manner like center, start, end.
  • FlingBehavior: logic describing fling behavior.
  • Content: This is Kotlin DSL for LazyListScope which provides the content to be shown in the list.
  • LazyListScope: It is Interface that contains methods like item{} for a single item, items(count) for multiple items, itemsIndexed for item with an index number, stickeyHeader etc.

Output:


LazyRow

LazyRow is a Composable function. With help of LazyRow, we can make a Horizontal List that will load lazily.

  • Modifier: Modifier is a class that provides formatting attributes.
  • State: State in LazyList provides state of a list like a scroll position, firstVisibleItemIndex so on and so forth.
  • ContentPadding: It is a padding that applies to the first and last item in the list.
  • ReverseLayout: ReverseLayout attribute is used when we have to display the list in reverse order and it also loads the list in reverse order.
  • HorizontalArrangement: Arrangement is a class that provides a variety of methods and attributes for Vertical Arrangement like Arrangement.Top, Arrangement.spacedBy(), etc..
  • VerticalAlignment: Alignment is used to align the list in a Vertical manner like center, start, end.
  • FlingBehavior: logic Describing fling behavior. 
  • Content: This is Kotlin DSL for LazyListScope which provides the content to be shown in the list.

LazyListScope: It is an Interface that contains methods like item{} for a single item, items(count) for multiple items, itemsIndexed for item with index number, etc.

Output:


LazyVerticalGrid

As we have been using GridLayoutManager for grids in RecyclerView. Similarly, compose provides LazyVerticalGrid for Grid Layout. As I am writing a blog it is an Experimental Api but we hope it’ll be stable soon.

  • Cells: GridCells is a sealed class that contains two classes Fixed and Adaptive
  • GridCells.Fixed(count) provides a fixed number of cells in Grid.
  • GridCells.Adaptive(minSize) adapts size by itself just we need to pass the min size of the grid cell. It’ll try to position as many rows or columns as possible on the condition that every cell has at least “min size” space and all extra space distributed evenly.
  • Modifier: Modifier is a class that provides formatting attributes.
  • State: State in LazyList provides state of a list like a scroll position, firstVisibleItemIndex so on and so forth.
  • ContentPadding: It is a padding that applies to the first and last item in the list.
  • Content: LazyGridScope content for LazyGridVerticalGrid.

Output:

Things made easy with Lazy Layouts

  • The thing I like about Lazy Layout is we can add a single independent item but not in the case of our greedy XML layouts. To achieve this kind of behaviour we need to do a lot of work and it is time-consuming.
  • Pagination made easy in lazy composable we can use itemsIndexed() lambda function to get visible item indexed and if the index is at last item we can invoke pagination function to load more data from the data source.
  • We can use LazyRow inside LazyColumn vise versa. Don’t need nested adapters to achieve this kind of behaviour.
  • Compose is written in Kotlin language so we can take full advantage of it. We can make a conditional statement in any composable function.

Conclusion


As in conclusion, I have a little exercise for readers. Let’s think about how we can implement the above output traditionally in RecyclerView, and then try to implement the same behaviour in compose. You’ll understand the difference between RecyclerView and List. Happy Composing.

Source Code

Written By,

Android Developer at Yudiz Solutions Pvt. Ltd