Element Lists: The Basics

Imagine being given a list of 100 elements and asked to display them on a mobile device. How would you do it? Personally, my first instinct would be to ask: how are these elements going to be positioned? Horizontally? Vertically? That’s the main question.

At this point, most developers, myself included, would instinctively reach for components like Column or Row. These components are perfect for aligning items vertically or horizontally, respectively. And, if you’ve already read my excellent article on element alignment in Jetpack Compose (yes, I’m doing a bit of self-promotion here, and who’s to blame me?), you probably know how to use them effectively! Check it out here.

But let’s be honest, displaying 100 elements in a Column or Row isn’t ideal. Why? Simply because a smartphone screen can only display a limited number of visible elements at once.

Example with Column

Let’s take an example to illustrate this issue. Here’s some code using a Column:

s you can see, this Column displays a list of 100 elements, but only the first 9 are visible on the screen. Not ideal, right?

Enter Lists and Grids

This is where lists (LazyColumn, LazyRow) and grids (LazyVerticalGrid, LazyHorizontalGrid) come in handy. And if you haven’t guessed it yet, Jetpack Compose makes this so much easier!

Every time I work with Compose, I say to myself: God bless the person who thought of creating Jetpack Compose. Honestly, it’s an incredible tool that simplifies mobile development. But let’s get back to the point.

Whenever you have a long list of elements and you want them to be scrollable, think of a LazyColumn for vertical scrolling or a LazyRow for horizontal scrolling. It's really that simple!

Types and Usage

Let’s start with the basics. The LazyColumn is perfect for displaying a long list of elements in a vertical scrolling manner. Here’s a simple example:

At first glance, this might seem identical, but if you click on Start Interactive Mode, you'll realize that it's totally different. In the first example using Column, you can’t scroll through the list to see the other elements. However, with LazyColumn, you can scroll based on how many elements are in the list, making it much more functional.

Next, there’s LazyRow, which works exactly the same as LazyColumn, except that the scrolling is horizontal. Perfect for image carousels or horizontal lists.

What About Grids?

Grids allow you to display elements in multiple columns or rows. Think of it like a table with several cells. With LazyVerticalGrid, you specify how many columns you want, and Jetpack Compose does the rest.

n this example, you have a grid with two columns and vertical scrolling. You can also control the size of the items to customize the grid's appearance.

In Summary

Whenever you think about scrolling through a collection of data, think LazyColumn, LazyRow, or grids. Using a simple Column for long lists can overload your app and make the user experience less smooth.

Now, you’ve got all the tools you need to choose the right components and create elegant, high-performance user interfaces. Enjoy your journey with Jetpack Compose, and remember, every technical challenge is an opportunity to become a better developer.

If you found this article helpful, don’t forget to subscribe, like, and leave a comment! Let me know if there’s a specific mobile development topic you’d like me to cover in the future. I’m always open to new ideas and happy to dive into whatever interests you. Thanks for your support, and stay tuned for more great content!