Android RecyclerView Example Kotlin | Working Example

RecyclerView is a more flexible version of a ListView with more advance features. There are several components that work together to display the data. If you have a large set of data or data that changes frequently then RecyclerView is the best option to use. So, in this Android RecyclerView Example in Kotlin we will create a RecyclerView in Android Studio using Kotlin Language.

RecyclerView reuses the views when a user scrolls the screen up or down and does not create new views from the start. Only those views are loaded that are currently being displayed on the screen. So in this way RecyclerView saves memory and the application does not become heavier in size.

Android RecyclerView Example in Kotlin

So open your Android Studio and create a new Android Project. Name it anything, here in my case the project name is “KotlinRecyclerView”. Select Kotlin as your default language.

After that first come to your build.gradle (Module: app) file and add this dependency and click Sync Now on the top right corner.

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

1	implementation 'com.android.support:recyclerview-v7:28.0.0'

Now come to the activity_main.xml file and change the default Layout from Constraint Layout to Relative Layout. Remove the default Hello World TextView and then add a RecyclerView with match_parent width and height.

<androidx.recyclerview.widget.RecyclerView

        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"/>

<androidx.recyclerview.widget.RecyclerView

android:id="@+id/recyclerview"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scrollbars="vertical"/>

The final activity_main.xml file will be like this

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    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">

    <androidx.recyclerview.widget.RecyclerView

        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

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">

<androidx.recyclerview.widget.RecyclerView

android:id="@+id/recyclerview"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scrollbars="vertical" />

</RelativeLayout>

For designing the look of each row we will make use of a separate XML file. Create a new XML file and name it as row_data. Change the default Layout to Relative Layout. Change height of the Relative Layout to wrap_content and then add an ImageView and TextView with wrap_content width and height.

row_data.xml

<ImageView

        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="5dp"/>

    <TextView

        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_toRightOf="@+id/imageview"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="5dp"/>

<ImageView

android:id="@+id/imageview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher"

android:layout_marginTop="5dp"

android:layout_marginLeft="5dp"/>

<TextView

android:id="@+id/textview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="TextView"

android:layout_toRightOf="@+id/imageview"

android:layout_marginTop="15dp"

android:layout_marginLeft="5dp"/>

The final row_data.xml file will be like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView

        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="5dp"/>

    <TextView

        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_toRightOf="@+id/imageview"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="5dp"/>



</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<ImageView

android:id="@+id/imageview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher"

android:layout_marginTop="5dp"

android:layout_marginLeft="5dp"/>

<TextView

android:id="@+id/textview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="TextView"

android:layout_toRightOf="@+id/imageview"

android:layout_marginTop="15dp"

android:layout_marginLeft="5dp"/>

</RelativeLayout>

MainActivity.kt

In our MainActivity.kt file we will make an ArrayList of type String to add some items in our list. So, we add the items in a separate function. We will use LinearLayout Manager to position the views.

 val items: ArrayList<String> = ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        addItems()

        recyclerview.layoutManager = LinearLayoutManager(this)
        recyclerview.adapter = Adapter(items)
    }

    fun addItems()
    {
        items.add("Item 1")
        items.add("Item 2")
        items.add("Item 3")
        items.add("Item 4")
        items.add("Item 5")
        items.add("Item 6")
        items.add("Item 7")
        items.add("Item 8")
        items.add("Item 9")
        items.add("Item 10")
        items.add("Item 11")
        items.add("Item 12")
        items.add("Item 13")
        items.add("Item 14")
        items.add("Item 15")
    }

val items: ArrayList<String> = ArrayList()

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

addItems()

recyclerview.layoutManager = LinearLayoutManager(this)

recyclerview.adapter = Adapter(items)

}

fun addItems()

{

items.add("Item 1")

items.add("Item 2")

items.add("Item 3")

items.add("Item 4")

items.add("Item 5")

items.add("Item 6")

items.add("Item 7")

items.add("Item 8")

items.add("Item 9")

items.add("Item 10")

items.add("Item 11")

items.add("Item 12")

items.add("Item 13")

items.add("Item 14")

items.add("Item 15")

}

Since, we have not created an Adapter that’s why we will face an error in MainActivity.kt for now.

Android RecyclerView Example In Kotlin: Adapter.kt

Now we create an Adapter class to load data into the views. Right click on your Package name and click New then click Kotlin File/Class and make a new Kotlin class. In my case the name of Adapter class is Adapter.kt. It will take an ArrayList<String> as a parameter. Also, Adapter needs a ViewHolder class to hold the views.

package com.example.kotlinrecyclerview


import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.row_data.view.*

class Adapter(val items: ArrayList<String>) : RecyclerView.Adapter<ViewHolder>() {

    // Gets the number items
    override fun getItemCount(): Int {
        return items.size
    }

    // Inflates the item views
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder
    {
        return ViewHolder(
            LayoutInflater.from(parent.context).inflate(R.layout.row_data, parent, false)
        )
    }

    // Binds each item in the ArrayList to a view
    override fun onBindViewHolder(holder: ViewHolder, position: Int)
    {
        holder?.textview?.text = items.get(position)

    }
}

class ViewHolder(view: View) : RecyclerView.ViewHolder(view)
{
    val textview = view.textview
}

package com.example.kotlinrecyclerview

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import androidx.recyclerview.widget.RecyclerView

import kotlinx.android.synthetic.main.row_data.view.*

class Adapter(val items: ArrayList<String>) : RecyclerView.Adapter<ViewHolder>() {

// Gets the number items

override fun getItemCount(): Int {

return items.size

}

// Inflates the item views

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder

{

return ViewHolder(

LayoutInflater.from(parent.context).inflate(R.layout.row_data, parent, false)

)

}

// Binds each item in the ArrayList to a view

override fun onBindViewHolder(holder: ViewHolder, position: Int)

{

holder?.textview?.text = items.get(position)

}

class ViewHolder(view: View) : RecyclerView.ViewHolder(view)

{

val textview = view.textview

}

To remover the red line error press ALT+ENTER or click the bulb icon on the left and then we have to override all the three functions.

getItemCount
onCreateViewHolder
onBindViewHolder

getItemCount returns the number of items in the list. onCreateViewHolder inflates our row_data.xml and in onBindViewHolder we are binding the items of the list with TextViews.

So to provide a beautiful look to RecyclerView you can add separators or divider lines after each view. For doing this add this code.

val layoutManager = LinearLayoutManager(this)
val dividerItemDecoration = DividerItemDecoration(recyclerview.getContext(), layoutManager.getOrientation())
recyclerview.addItemDecoration(dividerItemDecoration)

val layoutManager = LinearLayoutManager(this)

val dividerItemDecoration = DividerItemDecoration(recyclerview.getContext(), layoutManager.getOrientation())

recyclerview.addItemDecoration(dividerItemDecoration)

Finally, our complete MainActivity.kt will be like this

package com.example.kotlinrecyclerview

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.DividerItemDecoration
import androidx.recyclerview.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    val items: ArrayList<String> = ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        addItems()

        recyclerview.layoutManager = LinearLayoutManager(this)
        recyclerview.adapter = Adapter(items)
        val layoutManager = LinearLayoutManager(this)
        val dividerItemDecoration = DividerItemDecoration(recyclerview.getContext(), layoutManager.getOrientation())
        recyclerview.addItemDecoration(dividerItemDecoration)
    }

    fun addItems()
    {
        items.add("Item 1")
        items.add("Item 2")
        items.add("Item 3")
        items.add("Item 4")
        items.add("Item 5")
        items.add("Item 6")
        items.add("Item 7")
        items.add("Item 8")
        items.add("Item 9")
        items.add("Item 10")
        items.add("Item 11")
        items.add("Item 12")
        items.add("Item 13")
        items.add("Item 14")
        items.add("Item 15")
    }
}

package com.example.kotlinrecyclerview

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import androidx.recyclerview.widget.DividerItemDecoration

import androidx.recyclerview.widget.LinearLayoutManager

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

val items: ArrayList<String> = ArrayList()

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

addItems()

recyclerview.layoutManager = LinearLayoutManager(this)

recyclerview.adapter = Adapter(items)

val layoutManager = LinearLayoutManager(this)

val dividerItemDecoration = DividerItemDecoration(recyclerview.getContext(), layoutManager.getOrientation())

recyclerview.addItemDecoration(dividerItemDecoration)

}

fun addItems()

{

items.add("Item 1")

items.add("Item 2")

items.add("Item 3")

items.add("Item 4")

items.add("Item 5")

items.add("Item 6")

items.add("Item 7")

items.add("Item 8")

items.add("Item 9")

items.add("Item 10")

items.add("Item 11")

items.add("Item 12")

items.add("Item 13")

items.add("Item 14")

items.add("Item 15")

}

So, I hope you understand this Android RecyclerView Example in Kotlin. If you want to find out more details about RecyclerView then check RecyclerView Databinding Kotlin.