RecyclerView Multiple View Types in Android with Example - GeeksforGeeks

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.
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:
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
<?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 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    }}
Output:
Now when we run our app we see the below screen:
Image #1: The schematic output of the code
Picked
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Android Listview in Java with Example
How to Save Data to the Firebase Realtime Database in Android?
Flexbox-Layout in Android
How to Change the Background Color After Clicking the Button in Android?