We previously looked at how to handle states inside a Composable with the quantity selection component. In this article, we’ll see how to make a scrollable list. When it comes to display a list of elements, we need to use a
RecyclerView with an adapter to define each item. This basic feature can become hard for so many cases but Jetpack Compose gives a new way to display a scrollable list!
Disclaimer: All source code is developed with Compose 1.0.0-alpha02. Because Jetpack Compose is still in alpha, some source code may change with new versions.
Scrollable Compose components
Jetpack Compose offers two ways each to display a scrollable list in vertical or horizontal:
- ScrollableColumn (resp. ScrollableRow) is a variant of
Row) that scrolls when content is bigger than its height (or width). That can be the equivalent of the
ScrollViewin the previous framework UI.
- LazyColumnFor (resp. LazyRowFor) is a vertically (or horizontally) scrolling list that only composes and lays out the currently visible items. That can be the equivalent of the
RecyclerViewand its adapter in the previous framework UI.
Note: Because we are an Android developer, we want to use
LazyColumnForas much as possible but in the current version of Compose, we don’t have as much flexibility with
ScrollableColumn. e.g. you can’t scroll at a specific position with
Product item component
At Decathlon, each product item has a picture, a name and a price. In our example we are going to add the brand following theses specifications:
- The size of the picture is 70 dp in width and height.
- The text for the brand and the name use Roboto Condensed font, according to the official Decathlon typography.
- The font weight for the brand is bold W700 and for the name bold W400.
- The price component developed in this previous article.
This component can be reused when we need to display a product in a list. Our model is pretty simple.
ScrollableColumn and ScrollableRow components
As mentioned earlier we will be using a
ScrollableColumn to make a list which you can scroll vertically or a
ScrollableRow to scroll horizontally. Let’s have a look at the source code, both of these scrollers have a similar method signature.
This is similar to any other component in Jetpack Compose. We can update the
modifier to modify the UI according to our needs, the last parameter is the content of the scrollable area and there are some settings available for the scroll. If we want a simple scrollable list with a divider between each product, we can create our composable like this:
We declare our
ScrollableColumn and we iterate inside this component to display our product item. Nothing more. Thanks to declarative UI, we describe what we want to display and Jetpack Compose does the rest!
LazyColumnFor and LazyRowFor components
Lazy versions of scrollable components are simpler. You don’t have settings for the scroll but they can take your list of models and you just need to declare your product item depending on the current model given in the itemContent lambda.
Similar to our previous example, the implementation looks like:
You don’t need to declare a
RecyclerView with an adapter. Jetpack Compose doesn’t recycle any views. It will just draw what the user should see and you don’t need to care about internal stuff.
Lists with Jetpack Compose are magic! ✨
Smooth scroll at a specific position
In many cases, you want to scroll at a specific position in your list. Because your list is sorted alphabetically and you want to go at the first item of a letter or you want to come back at the beginning of the list. If you want to do this, you need to manipulate a ScrollState from the function rememberScrollState.
In our example, we display a floating action button at the bottom of our screen. Clicking it will bring us back to the first list item.
Warning: This feature isn’t available with lazy components. In the current version of Compose, you need to use a scrollable component.
In our composable, we declare a scrollState variable from
rememberScrollState function, we give this state to our scrollable component and we just need to call the needed function to scroll to a specific position, here smoothScrollTo with
0f that corresponds to the beginning of our list.
In this post, we’ve taken a quick dive into displaying a product list using
ScrollableColumn and see how to scroll at a specific position.
Stay tuned for the next post about Jetpack Compose at Decathlon!
If you are interested in joining Decathlon Tech Team, check out our carriers portal to see the different exciting opportunities ! 👩💻👨💻