RecyclerView Multiple View Types in Android with Example

Last Updated : 20 Dec, 2021

We've all used RecyclerView in Android to display a list in our applications. RecyclerView is used to display emails in the Gmail app, feeds on Facebook and Instagram, and messages in WhatsApp, among other things. However, as being an Android Developer you would have come across a fact that when we define a view and the list items are only displayed according to that view. But what if you want to add different view types to the RecyclerView? You can do so by adding Multiple Views to the same RecyclerView. This article will teach you how to use Multiple Views in RecyclerView.

Multiple Views in RecyclerView

A RecyclerView can contain multiple views. The feed page on Facebook, for example, is an example of Multiple View. In the same RecyclerView, you can add an image, a video, text, or a combination of all three. Chatting on WhatsApp is another example. We can think of the message we send as being placed in a RecyclerView. As a result, when you send a message, it appears on the right side of the screen. However, if someone on the other side sends a message, it will appear on the left-hand side. As a result, the view type has changed. This is how we will learn how to do it in this blog. We will create a RecyclerView and add two different views to it. You can create more view types according to your use case. We start by starting AndroidStudio and creating a new project:

Example

Creating Views for the project

In our project, we are going to use two views i.e. item_view_1.xml and item_view_2.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#0091ea"
    android:paddingLeft="24dp"
    android:paddingRight="24dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:gravity="center_vertical"
        android:text="View 1 Geeks for Geeks"
        android:textColor="#FFFFFF"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/link_on"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#00bfa5"
    android:paddingLeft="24dp"
    android:paddingRight="24dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:gravity="center_vertical"
        android:textColor="#000000"
        android:text="View 2 Geeks for Geeks"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/someImageView"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/link_off"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Data type

A data class is required to store the data that will be displayed on the views. Make a data class called Data and add the following code: The viewType indicates which view is being used, either item view 1 or item view 2, and textData stores the data that will be displayed on the TextView.

Kotlin

data class Data(val theView: Int, val theText: String)

RecyclerView Adapter

Now, for the RecyclerView, we must create an Adapter class that will store all of the RecyclerView logic, such as when to display which view. Make a RecyclerViewAdapter Adapter class. In the RecyclerViewAdapter class, if the desired view is item view 1, the content of item view 1 will be displayed; otherwise, the content of item view 2 will be displayed.

Kotlin

class gfgViewAdapter(context: Context, list: ArrayList<Data>) :
    RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    companion object {
        const val THE_FIRST_VIEW = 1
        const val THE_SECOND_VIEW = 2
    }

    private val yourContext: Context = context
    var list: ArrayList<Data> = list

    private inner class GfgViewOne(itemView: View) :
        RecyclerView.ViewHolder(itemView) {
        var gfgText: TextView = itemView.findViewById(R.id.gfgTextView)
        fun bind(position: Int) {
            val recyclerViewModel = list[position]
            gfgText.text = recyclerViewModel.textData
        }
    }

    private inner class View2ViewHolder(itemView: View) :
        RecyclerView.ViewHolder(itemView) {
        var gfgText: TextView = itemView.findViewById(R.id.gfgTextView)
        fun bind(position: Int) {
            val recyclerViewModel = list[position]
            gfgText.text = recyclerViewModel.textData
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        if (viewType == VIEW_TYPE_ONE) {
            return GfgViewOne(
                LayoutInflater.from(context).inflate(R.layout.gfgParentOne, parent, false)
            )
        }
        return View2ViewHolder(
            LayoutInflater.from(context).inflate(R.layout.item_view_2, parent, false)
        )
    }

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

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        if (list[position].viewType === VIEW_TYPE_ONE) {
            (holder as GfgViewOne).bind(position)
        } else {
            (holder as View2ViewHolder).bind(position)
        }
    }

    override fun getItemViewType(position: Int): Int {
        return list[position].viewType
    }
}

Incorporating RecyclerView into our project

Now, in the activity main.xml file, include RecyclerView. The code for activity main.xml is as follows:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".gfgMainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/someRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Now all that remains is to add the data to the views. The code for MainActivity is as follows:

Kotlin

class GeeksforGeeksActivity : AppCompatActivity() {
    private lateinit var gfgRecycler: GfgRecycler
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.gfgMain)

        val mydataList = ArrayList<Data>()
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_ONE, "1. Geeks View 1"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_TWO, "2. Geeks View 2"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_ONE, "3. Geeks View 3"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_TWO, "4. Geeks View 4"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_ONE, "5. Geeks View 5"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_TWO, "6. Geeks View 6"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_ONE, "7. Geeks View 7"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_TWO, "8. Geeks View 8"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_ONE, "9. Geeks View 9"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_TWO, "10. Geeks View 10"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_ONE, "11. Geeks View 11"))
        dataList.add(Data(GfgRecyclerAdapter.VIEW_TYPE_TWO, "12. Geeks View 12"))

        val adapter = GfgRecyclerAdapter(this, dataList)
        gfgRecycler = findViewById(R.id.gfgRecycler)
        gfgRecycler.layoutManager = LinearLayoutManager(this)
        gfgRecycler.adapter = adapter
    }
}