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
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
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
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...