RecyclerView in Android
Tags: recyclervie, androidfundamental, android
Published: 2021-12-30 13:19:59

---
title: RecyclerView in Android
published: true
date: 2020-12-28 22:02:02 UTC
tags: recyclervie,androidfundamental,android
canonical_url: https://medium.com/@magdamiu/recyclerview-in-android-338785653c61
---

[RecyclerView](https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView) is a ViewGroup that helps us to display a scrollable list of elements. It is one of the most used UI components in the Android apps and it involves having a data source, an adapter, and the RecyclerView. Other than displaying the content, RecyclerView is efficiently reusing the views that have scrolled off the screen by recycling them.

![](https://cdn-images-1.medium.com/max/960/0*l-yAtDTbDxJ1dVlv)

### 📃Components Overview

- Data source — list of objects that could be obtained from a local database, or as a result of a http request, or even it could be a list with some predefined values.
- [RecyclerView](https://developer.android.com/guide/topics/ui/layout/recyclerview#java) is a scrolling list for list items and to have access at it we must add some dependencies in the gradle file
- Layout for one item of data — XML file
- [Layout manager](https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView.LayoutManager) handles the organization of UI components in a view (there are 3 predefined ways to display the items)
- [View holder](https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView.ViewHolder) has view information for displaying one item
- [Adapter](https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView.Adapter) connects data to the RecyclerView
- Set the Adapter to the RecyclerView and we are done 🙂

![](https://cdn-images-1.medium.com/max/960/0*7S9M5GtGQVcZCfpv)

#### LayoutManager

![](https://cdn-images-1.medium.com/max/960/0*IxZiO6CXEnsCacPX)

#### Adapter

- We are talking about applying the adapter design pattern as an intermediary between the source data we want to display and the view
- [Adapter](https://refactoring.guru/design-patterns/adapter) is a structural design pattern that allows objects with incompatible interfaces to collaborate
- Responsibile to create, updade, add and delete items from the list
- It suppose to implement the abstract class [RecyclerView.Adapter](https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView.Adapter)

#### ViewHolder

- Used by the adapter to prepare one item view for each element from the datasource
- The layout of the item is specified in an XML resource file, it’s like a 1:1 relation between the view and the element from the list of objects provided as a datasource
- Can have clickable elements and it is placed by the layout manager
- We must implement the abstract class [RecyclerView.ViewHolder](https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView.ViewHolder)

### 👩🏻‍💻Implementation steps

1. Get the data by creating a new object class (data source)
2. Add the _RecyclerView_ dependency to _app/build.gradle_ file and add _RecyclerView_ to layout
3. Create XML layout for item
4. Define the _LayoutManager_ in activity
5. Extend _RecyclerView.ViewHolder_ in a separated class
6. Extend _RecyclerView.Adapter_ in a separated class
7. In _onCreate_ of activity, create a _RecyclerView_ with adapter and layout manager

To cover the implementation steps we will display a list of emails. The data source is hardcoded, right now we are focusing on learning how to use RecyclerView.

**Step 1: Get the data by creating a new object class (data source)**

{% gist https://gist.github.com/magdamiu/21bc0831df6d654623c64908838d1c50 %}

{% gist https://gist.github.com/magdamiu/3daa5d8d8636923e0f3677b3d30ba824 %}

**Step 2: Add the _RecyclerView_ dependency to _app/build.gradle_ file and add _RecyclerView_ to layout**

{% gist https://gist.github.com/magdamiu/239d5d40a03291423d862614f4b4fc85 %}

{% gist https://gist.github.com/magdamiu/226d03bf35c84df8a528f74eceefb916 %}

**Step 3: Create XML layout for item**

{% gist https://gist.github.com/magdamiu/dcc02fb838ce548e3a0719492be8b271 %}

**Step 4: Define the _LayoutManager_ in activity**

{% gist https://gist.github.com/magdamiu/a065f665d38fd9fdc00ff8072b7ca9ad %}

**Step 5: Extend _RecyclerView.ViewHolder_ in a separated class**

{% gist https://gist.github.com/magdamiu/88d0fee3258c6b4d228a50f37a3fdd5b %}

**Step 6: Extend _RecyclerView.Adapter_ in a separated class**

{% gist https://gist.github.com/magdamiu/bfd83e3ab22db927370800dbc90c2bb5 %}

**Step 7: In _onCreate_ of activity, create a _RecyclerView_ with adapter and layout manager**

{% gist https://gist.github.com/magdamiu/58f89f13159bb482fa749e92b0fc62ef %}

### 🔔Notify the Adapter

![](https://cdn-images-1.medium.com/max/960/0*WW8aytyRig60Drfw)

To not impact the speed of rendering the UI elements for a RecyclerView make sure that you’re not calling notifyDataSetChanged(), setAdapter(Adapter), or swapAdapter(Adapter, boolean) for small updates. [[official recommendation](https://developer.android.com/topic/performance/vitals/render#scrollable_lists)] The solution is to use [SortedList](https://developer.android.com/reference/androidx/recyclerview/widget/SortedList)or [DiffUtil](https://developer.android.com/reference/androidx/recyclerview/widget/DiffUtil)to create minimal updates when the data source has changed.

{% gist https://gist.github.com/magdamiu/535d96b8776ed15c81c0c1463cf6ecf6 %}

{% gist https://gist.github.com/magdamiu/6b94fca92d65c0c159923d25b65fc99c %}

### ✨Item decorators

We could set dividers between the items using [DividerItemDecoration](https://developer.android.com/reference/androidx/recyclerview/widget/DividerItemDecoration.html)

{% gist https://gist.github.com/magdamiu/503a1327242f32d518629d55e671776e %}

![](https://cdn-images-1.medium.com/max/512/0*BA33V2XIUxWzgcBg)

### 💫Swipe to refresh

**Step 1: Add a new dependency in the gradle file**

{% gist https://gist.github.com/magdamiu/aecdea2b6c5f1d30c7f2414679d95750 %}

**Step 2: Wrap the RecyclerView in a SwipeRefreshLayout**

{% gist https://gist.github.com/magdamiu/867c9d70b3df51021ee9b10359226354 %}

**Step 3: Update the code in the Adapter**

{% gist https://gist.github.com/magdamiu/0839d28fc44d2745670b4406610a3383 %}

**Step 4: Setup SwipeRefreshLayout**

{% gist https://gist.github.com/magdamiu/c7ad1083b71ff0c16232686f20b99e6f %}

![](https://cdn-images-1.medium.com/max/512/0*QPdANwC12veFaG3c)

You could check the full source code [here](https://github.com/magdamiu/RecyclerView-AndroidFundamentals). (different branches for each section)

### 📚Learn more

- [Android Vitals — Slow Rendering](https://developer.android.com/topic/performance/vitals/render#scrollable_lists)
- [Create dynamic lists with RecyclerView](https://developer.android.com/guide/topics/ui/layout/recyclerview#java)
- [RecyclerView ins and outs — Google I/O 2016](https://www.youtube.com/watch?v=LqBlYJTfLP4)
- [Yigit Boyar: Pro RecyclerView](https://www.youtube.com/watch?v=KhLVD6iiZQs)

Enjoy and feel free to leave a comment if something is not clear or if you have questions. And if you like it please share!

Thank you for reading! 🙂

**Follow me on:** [**Twitter**](https://twitter.com/MagdaMiu) | [**Medium**](https://medium.com/@magdamiu) | [**Dev.to**](https://dev.to/magdamiu)

_Originally published at_ [_http://magdamiu.com_](https://magdamiu.com/2020/12/29/recyclerview-android/) _on December 28, 2020._