Scrolling... Scrolling... RecyclerView for Android with Kotlin!
Tags: android, kotlin, recyclerview
Published: 2019-05-05 11:57:31

---
title: Scrolling... Scrolling... RecyclerView for Android with Kotlin!
published: true
description: Tutorial on how to create a simple RecyclerView with Kotlin for Android
tags: Android, Kotlin, RecyclerView
---

![Scrolling](https://media.giphy.com/media/vvWhQsVAFkyisScAsM/giphy.gif)

We all love scrolling (some weird people swipe ¯\_(ツ)_/¯). 

Scrolling is a major interaction performed almost in every application around.

Let’s have a look what’s under the hood of Android implementation of “efficient scrolling” called RecyclerView!

***
# Part One: What is Recycler View and what does it actually recycle? ♻️
***

RecyclerView initiates an efficient way of creating ViewHolder objects, binding them with data and reusing according to a list state.

Imagine, you received `44442` emails on your mobile application (Must be very popular!).

Theoretically, we would think that for every single email there should be a “cell view” created with email details such as title and short description. But we have… a lot of emails… What to do?

RecyclerView comes to help! But how?

It consists from three main elements: cell layout, Adapter and ViewHolder objects.

Cell layout represents an XML design blueprint of a list item. Something like this:

![cell](https://thepracticaldev.s3.amazonaws.com/i/o6fcxuy6i1w1e2bhuwfe.png)

As a next step, Adapter uses a data from the email server, and “binds” XML view to a particular data such as title or delivery time.

And to perform this binding, Adapter manages something which is called ViewHolder - a class which belongs to RecyclerView, responsible for displaying an item in a view.

And here comes amazing part:

Instead of creating 44442 views for each of our emails, RecyclerView reuses already created view holders which left an observable area of the screen. 

What?

![what](https://media.giphy.com/media/3o7527pa7qs9kCG78A/giphy.gif)

Imagine, your list of emails occupies full screen height and can contain 10 emails to be showed. 

You start scrolling up.

⬆️

Once the top view is out of view, it is being reused by RecyclerView, with new data and pushed as a new bottom element. Something like that.

Enough of theory, let’s do practical part! 🔨

***
# Part Two: Let’s create a RecyclerView with… Kotlin! ♻️
***

Kotlin is love, Kotlin is life (me ⓒ).

From my point of view, Kotlin is one of the best things which happened to Android :)

It is super easy to write, has a functional approach, easy to understand and hides a lot of boilerplate logic.

What are we waiting for? Let’s create our “email” app project!

`NOTE`: All ready copy-paste code is available [here](https://github.com/NickitaX/recyclerviewtutorial)

A simple EmptyActivity will be fine for our use case:

![setup](https://thepracticaldev.s3.amazonaws.com/i/nvzutsc3idw2pca1hnib.png)

Next, let’s create our item/cell layout!

For a simple preview, we can use a title, description and a time.

Let’s create one in res/layout folder named email_item_layout.xml:

![item](https://thepracticaldev.s3.amazonaws.com/i/stdq1dchj0kivg8k03d4.png)

Closer look:

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#FFECECEC"
    android:orientation="horizontal"
    android:weightSum="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_weight="0.2"
        android:orientation="vertical"
        android:padding="10dp">

        <TextView
            android:id="@+id/email_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Let's go to Sydney Vivid tonight!"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/email_description"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Hey, Nick! There is amazing show near..." />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.8"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/email_time"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="10:38" />
    </LinearLayout>
</LinearLayout>

```

Alright, what’s next? Ah, unfortunately RecyclerView doesn’t come by default, so we need to import it as external dependency in our build gradle file:

```gradle
implementation 'com.android.support:recyclerview-v7:28.0.0'
```

Once it is done, we can create our email data class! We can create “models” package and declare a simple Email class which would contain title, description and delivery time as String attributes:

```kotlin
data class Email(val title: String, val description: String, val time: String)
```

Done!

Now one of the most interesting parts: The Mighty Adapter!

Let’s create a file named EmailAdapter in new package called “adapters”.

Our EmailAdapter would accept a list of Email objects, context as well as contain a custom ViewHolder:

```kotlin
class EmailAdapter(private val emailList: List<Email>, private val context: Context) : RecyclerView.Adapter<EmailAdapter.EmailViewHolder>() {

    override fun onBindViewHolder(emailViewHolder: EmailViewHolder, index: Int) {
        emailViewHolder.titleTextView.text = emailList[index].title
        emailViewHolder.descriptionTextView.text = emailList[index].description
        emailViewHolder.timeTextView.text = emailList[index].time
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): EmailViewHolder {
        return EmailViewHolder(LayoutInflater.from(context).inflate(R.layout.email_item_layout, parent, false))
    }

    override fun getItemCount(): Int {
        return emailList.size
    }

    inner class EmailViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val titleTextView: TextView = view.findViewById(R.id.email_title)
        val descriptionTextView: TextView = view.findViewById(R.id.email_description)
        val timeTextView: TextView = view.findViewById(R.id.email_time)

    }
}

```

`onCreateViewHolder` is responsible for inflating XML layout of our email item into an `EmailViewHolder` object.
`EmailViewHolder` class extends `ViewHolder` and references views such as title, description and time `TextViews` we declared inside our XML layout, to be used for a data injection inside `onBindViewHolder` function.

We are almost done!!!

Now we need to place our RecyclerView XML declaration into activity_main.xml:

```xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/email_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>
```

Next step will be to initiate RecyclerView inside MainActivity, and feed some random almost-real email data objects :) 

```kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val fakeEmails = generateFakeEmails()
        setUpEmailRecyclerView(fakeEmails)
    }

    private fun setUpEmailRecyclerView(emails: List<Email>) {
        val layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)
        val emailRecyclerView = findViewById<RecyclerView>(R.id.email_recycler_view)
        val recyclerAdapter = EmailAdapter(emails, this)
        emailRecyclerView.layoutManager = layoutManager
        emailRecyclerView.adapter = recyclerAdapter
    }

    private fun generateFakeEmails(): List<Email> {
        val titles = listOf(
                "Hot dogs $1 only!",
                "Dev.to beats Medium.",
                "We have updated our privacy :/",
                "Nick moves to New Zealand")
        val descriptions = listOf(
                "This is truly amazing, unexpected...",
                "Yes, yes, yes! It is happening!",
                "Follow our blog to learn more...",
                "Well, it supposed to happen...")
        val times = listOf(
                "13:42",
                "16:16",
                "12:34",
                "20:20")
        val emailList = mutableListOf<Email>()
        for (i in 0..10) {
            emailList.add(
                    Email(titles.random(), descriptions.random(), times.random())
            )
        }
        return emailList
    }
}

```

OMG! Look what we’ve got!!!

![result](https://thepracticaldev.s3.amazonaws.com/i/teoa8t1tdnxov0yd0op2.png)

And now we can Recycle our emails 😜

（ ^_^）o自自o（^_^ ）