ConcatAdapter in Android

ConcatAdapter is a new class available in recyclerview:1.2.0-alpha02 which enables you to sequentially combine multiple adapters to be displayed in a single RecyclerView. This enables you to better encapsulate your adapters rather than having to combine many data sources into a single adapter, keeping them focused and re-usable. By default, ConcatAdapter isolates view types of nested adapters from each other such that it will change the view type before reporting it back to the RecyclerView to avoid any conflicts between the view types of added adapters.

Step by Step Implementation

Step #1:

Add the dependency required by the concat adapter. It is a component of recyclerView. In the app’s development. gradle include,

implementation "androidx.recyclerview:recyclerview:1.2.0-alpha05"

Step #2:

We have three different types of Views for the above screen. So, in order to structure the data, we must create three distinct data classes within the model package: Gfg, Course, and Banner. Where User is used to organizing data for a list of users. MyDetail is used to display my user data, and Banner is used to displaying the banner. The user appears to be,

data class Gfg(
     val id: Int = 0,
     val course: String = "",
     val price: String = ""
)

course data class looks like,

data class Course(
     val Courseid: Int = 0,
     val name: String = "",
     val tags: String = ""
)

and Banner looks like,

data class Banner(
     val bannerImage: Int = 0
)

Step #3: 

We will create a data source for a list of users in order to display the list. To accomplish this, we will create a DataSource object, and within it,

Kotlin

object DataSource {
    fun getGfg() = ArrayList<Gfg>().apply {
        add(Gfg(1, "Spandan", "https://s3.amazonaws.com/uifaces/faces/twitter/sunlandictwin/128.jpg"))
        add(Gfg(2, "Anshu", "https://s3.amazonaws.com/uifaces/faces/twitter/mufaddal_mw/128.jpg"))
        add(Gfg(3, "Eklavya", "https://s3.amazonaws.com/uifaces/faces/twitter/mufaddal_mw/128.jpg"))
        add(Gfg(3, "the-rebooted-coder", "https://s3.amazonaws.com/uifaces/faces/twitter/allfordesign/128.jpg"))
        add(Gfg(4, "richierich_anshu", "https://s3.amazonaws.com/uifaces/faces/twitter/shaneIxD/128.jpg"))

    fun getBanner() = Banner(R.drawable.gfg_site_cover)
}

Step #4: 

In RecyclerView, the Concat Adapter assists in displaying the RecyclerView Adapters in sequential order. So, in our use case, we will first define three different adapters,

Kotlin

class GfgAdapter(
        private val gfgCourseDetails: GfgCourseDetails
) : RecyclerView.Adapter<GfgAdapter.DataViewHolder>() {

    class DataViewHolder(gfgCourseItem: View) : RecyclerView.ViewHolder(gfgCourseItem) {
        fun bind(user: GfgCourseDetails) {

            gfgCourseItem.textViewUser.text = user.courseName
            gfgCourseItem.textViewPrice.text = user.Price
        }
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
            DataViewHolder(
                    LayoutInflater.from(parent.context).inflate(
                            R.layout.item_layout_gfg_course, parent,
                            false
                    )
            )
    override fun getItemCount(): Int = 1

    override fun onBindViewHolder(holder: DataViewHolder, position: Int) =
            holder.bind(gfgCourseDetails)

}

Then, in order to display the user list, we will create another adapter. UsersAdapter,

Kotlin

class GfgAdapter(
        private val gfg: ArrayList<Gfg>
) : RecyclerView.Adapter<GfgAdapter.DataViewHolder>() {

    class DataViewHolder(gfgCourseItem: View) : RecyclerView.ViewHolder(gfgCourseItem) {
        fun bind(gfg: Gfg) {
            gfgCourseItem.textViewGfgName.text = gfg.name
            Glide.with(gfgCourseItem.imageViewAvatar.context)
                    .load(gfg.avatar)
                    .into(gfgCourseItem.imageViewAvatar)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
            DataViewHolder(
                    LayoutInflater.from(parent.context).inflate(
                            R.layout.item_layout, parent,
                            false
                    )
            )

    override fun getItemCount(): Int = gfg.size

    override fun onBindViewHolder(holder: DataViewHolder, position: Int) =
            holder.bind(gfg[position])

}

Step #5:

To use the adapters we created in ConcatAdapter, we will first create an activity called MainActivity, which will also serve as our launcher activity.

Kotlin

class gfgMainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.gfg_mains)
    }
}

In MainActivity, we will now add four variables.

lateinit var gfgGfg: ConcatGfg
lateinit var myDetailGfg: MyDetailGfg
lateinit var userVerticalGfg: UsersGfg
lateinit var coursePriceGfg: CoursePriceGfg

This will be called in onCreate of Activity. In the function, we’ll now initialize the variables and set them to the adapter. This will be called in onCreate of Activity. In the function, we’ll now initialize the variables and set them to the adapter.

Kotlin

private fun setupDataInRecyclerView() {
    recyclerView.layoutManager = LinearLayoutManager(this)
    gfgVerticalAdapter = GfgsAdapter(DataSource.getGfg())
    coursePriceAdapter = CoursePriceAdapter(DataSource.getCoursePrice())
    myDetailAdapter = MyDetailAdapter(myDetail)
    adapter = ConcatAdapter(myDetailAdapter,  gfgVerticalAdapter,coursePriceAdapter)
    recyclerView.adapter = adapter
}

In this section, we will initialize the adapters UserAdapter, BannerAdapter, and MyDetailAdapter, as well as pass data from the DataSource object. Now, we’ll use it to initialize the layout manager for the recyclerView.

recyclerView.layoutManager = LinearLayoutManager(this) 

Finally, we’ll make a ConcatAdapter and pass the adapters into its function Object() { [native code] }.

GeekTip: The Sequence on which we will pass the adapter, the ConcatAdapter, will draw the list in the recyclerView in the same sequence.

Using data from individual adapters, you can create a recyclerView with multiple view types in sequential order.

Conclusion

In the end, remember that if we need to use the same recyclerView adapter multiple times in a recyclerView, 

1. we can create multiple instances of the same adapter and add them to the function Object() { [native code] } of ConcatAdapter.
2. Individual adapters should be used to implement the logic.
3. When we use the notifyDataSetChanged() method to update data in any adapter, the concat adapter will also call its notifyDataSetChanged() method ()
4. Instead of passing the adapters individually, we can pass a list of adapters in the ConcatAdapter function Object() { [native code] }. So, in our example.