Write RecyclerViews in one line of code with Jetpack Compose
Have you ever dreamed about not needing to handle RecyclerView adapters logic to show a simple UI list without all the boilerplate code an adapter needs?
Keep reading, in this article we are gonna discover the power of Jetpack Compose to make a simple user list in just one line of code.
Since the alpha of Jetpack Compose came out few weeks ago I started learning about it and I fell in love with the ease of writing awesome UI components in no time.
Before we start I would like to introduce what Jetpack Compose is, as the documentation states
Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.
You can read more and get to know Jetpack Compose in this link
Source: https://developer.android.com/jetpack/compose
The project
Now, let's build a simple User list that will hold a user photo, name, and a little bio.
We are looking for a row that looks like something like this
So, let's build it.
First of all, we will create a new class that will hold all of the UI components that will be needed to render a list of users, here we will create these components that will interact with each other to render this view.
If you are not familiar with Jetpack Compose, I suggest to you to follow this quick codelab Jetpack Compose Basics and Layouts in Jetpack Compose
Building the row view
Before Jetpack Compose we use to build this component in an XML resource file and then use this XML to inflate this view in onCreateViewHolder for later usage in onBindViewHolder.
Now with jetpack compose, we dont need to create any XML resource and any adapters that will use this component, we simply create the component with Kotlin code and thats all.
We are gonna create a class that will hold all the UI components as we said before, this class will be named UserListScreen.kt
Define the row
To create the User row we simply create a composable that will hold a Row, an Image and a Column, these put together will conform the UI we are looking for, there is no need on understanding how compose works right now, we just need to annotate this function as @Composable and call composable functions inside of it, the rest of the code describes itself.
UserRow
I have separated the different parts of the UI to better understanding, but as I said above, this Composable function should return to us something like this
This is all you need to create this simple row, we just pass as the parameter of this function a User object and an onUserClick lambda expression that will handle clicks, this is because we are gonna call this composable from another Composable function to handle the click itself.
As you can see we said that the clickable portion of the UI is the whole row, so each time we click in the whole row we will launch this lambda expression with the clicked User object, so later, we can do some actions on it.
Overview
Now that we have how we are gonna show each item in our list and also how to manage the click of this row, let's create another composable where this list should be created, now, if you think how we use to do it we need to think about declaring a RecyclerView, attach an adapter to it, write the adapter logic to handle the list of data, bind the row UI to the viewHolder method, setup a layout manager to the RecyclerView and all of this takes lots of time to just render a simple list.
Jetpack Compose to the rescue
We only need to show a list of Users with Jetpack Compose, now, how we do this without doing all the above steps you might ask.
This simple traduces like these 5 lines of code
Hey, hold up !! You told me it was only 1 line of code !!
As I said above, we are just using one line of code to setup a vertical list with LazyColumnFor, this Composable function takes a list of items (User list) and then it just calls the UserRow composable we did above to draw in the screen each User row vertically (since is LazyColumnFor).
Finally, we added up a divider at the end of each item, which is just one line compared to the addItemDecorator we need to also apply to the RecyclerView.
Wrapping up
Since this example uses ViewModel + LiveData, I will generate the last Composable function that will be responsible of drawing all this list into our UI, notice how the above functions were private? I did that because inside the UserListScreen we will only expose the Composable function that will be called from our Main Thread to render this view, so we just expose the actual complete implementation of this view and not all the Composable functions we did before to create it.
And finally from our UI thread (MainActivity or Fragment) we just call this Composable function to show our view
For the simplicity of this tutorial, I have not covered how to do the ViewModel , but instead, I have created a repository full of Jetpack Compose examples on how to work with each component and how to use LiveData
You can found the repository here
If the repo helped you, you can leave an ⭐ on it :)
Important
Since I’m using the 1.0.0-alpha02 version of Compose, it might be up to future changes on the API , I will try to keep this post up to date, but expect the repository to be also up to date
