Implementing a Nested RecyclerView in Android with ConcatAdapter

With the UI of the applications getting increasingly complex, there will be a time where you need to deal with RecyclerViews inside another RecyclerView. A good example of this kind of UI would be the Klook application.

It is likely that they made this UI using a nested RecyclerView. One way to make this happen is to structure RecyclerView like this. In this example, we will demonstrate how to set up the nested RecyclerView.

This how I would create the Outer Adapter for controlling the content of the nested RecyclerView. Each Viewholder contains header and list. The rough idea of the code of the Outer Adapter may look something like this:

class OutAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CheckUpResultViewHolder {
        return when (viewType) {
            R.layout.layout_header -> HeaderViewHolder(parent)
            R.layout.layout_first_section -> FirstSectionViewHolder(parent)
            R.layout.layout_second_section -> SecondSectionViewHolder(parent)
            R.layout.layout_third_section -> ThirdSectionViewHolder(parent)
        }
    }

    override fun getItemCount(): Int {
        return 6
    }

    override fun onBindViewHolder(holder: CheckUpResultViewHolder, position: Int) {
        //binding data
    }

    override fun getItemViewType(position: Int): Int = when (position) {
        0, 2, 4 -> R.layout.layout_header
        1 -> R.layout.layout_first_section
        3 -> R.layout.layout_second_section
        5 -> R.layout.layout_third_section
    }
}
//kotlin-language

As you can see, we separate each section of the UI into different adapters. Using a MergeAdapter helps us separate the logic of each section into one adapter, and we can reuse the adapter easily. Then we can combine each adapter like the snippet below:

val mergeAdapter = MergeAdapter(
    firstHeaderAdapter, 
    firstAdapter, 
    secondHeaderAdapter,
    secondAdapter,
    thirdHeaderAdapter,
    thirdAdapter
)
recyclerView.adapter = mergeAdapter

1. No need for an extra Adapter to the outermost RecyclerView.
2. With the MergeAdapter, you can easily encapsulate your adapters rather than combine data sources and logic into one adapter. To give you a clearer explanation, let's look at the next scenario. Suppose that the header of each section in the nested Recyclerview needs to be able to show the loading state.

Without MergeAdapter, the showing and hiding the loading state logic needs to be in the Outer Adapter. Having the header logic and the list logic inside the same adapter is not really a best practice because we might not be able to reuse the logic elsewhere. Therefore we are better separating each section into its own adapter. With the MergeAdapter, we can easily combine each section into the single RecyclerView. Each adapter encapsulates its logic which makes them reusable. 

Introduction to ConcatAdapter in Android

Understanding the Adapter

Setting Up ConcatAdapter

Additional Note

• If multiple adapters inside the MergeAdapter need to re-use the same ViewHolder class, there is a little more config to be made. We need to set the isolateViewTypes to false.

val builder = MergeAdapter.Config.Builder()
builder.setIsolateViewTypes(false)

val mergeAdapter = MergeAdapter(
    builder.build(),
    firstHeaderAdapter, 
    firstAdapter, 
    secondHeaderAdapter,
    secondAdapter,
    thirdHeaderAdapter,
    thirdAdapter
)

• The adapters inside the MergeAdapter can be added or removed dynamically like this.

mergeAdapter.addAdapter(6,fourtAdapter)

mergeAdapter.removeAdapter(//adapter)

• Avoid calling notifyDataSetChanged in the inner adapters since the MergeAdapter will also call notifyDataSetChanged. Therefore, using notifyItemRangeChanged, notifyItemInserted, notifyItemChange, and others are preferable.

Advantages of Using ConcatAdapter in Android for Nested RecyclerViews

• Each adapter is responsible for a single type of data. This makes your code modular and easier to maintain.
• For example, you can have one adapter for a header, another for a body, and another for a footer.

• Individual adapters can be reused across different screens or RecyclerViews in your app. This reduces duplication and improves consistency.
• This is particularly useful if you want to maintain a consistent look and feel across different parts of your application.
  
  

• By handling adapters separately, ConcatAdapter optimizes RecyclerView’s operations like binding, diffing, and recycling views.
  
  

• Easily add or remove sections from a RecyclerView by appending or detaching adapters dynamically.
  
  

Handling Click Events in Nested RecyclerViews

1. Delegate Clicks to Parent:
   Pass a click listener from the parent RecyclerView’s adapter to the nested RecyclerView. This ensures click events are bubbled up and handled in a central location, which is essential if you want to maintain a clean and manageable codebase.
   
   
2. Use Interfaces:
   Define an interface for click handling and implement it in the parent activity or fragment. Pass this interface to the nested RecyclerView adapter.
   
   
3. Use ViewModel:
   For apps following the MVVM architecture, bind click events to a shared ViewModel. This avoids tightly coupling the adapters with the UI.
   
   

Common Challenges and Solutions

• Problem: When multiple nested RecyclerViews are displayed, the scrolling performance might degrade.
• Solution:Use setHasFixedSize(true) for both parent and child RecyclerViews. Disable nested scrolling in child RecyclerViews using setNestedScrollingEnabled(false). This ensures that the view type is managed efficiently, reducing the overhead on the RecyclerView.
  
  

• Problem: Adding or removing sections dynamically can lead to inconsistencies in the UI.
• Solution: Use notifyItemRangeInserted() or notifyItemRangeRemoved() to update only the affected sections. This method ensures that only the affected sections are updated, making it more efficient to display the new data. Alternatively, use DiffUtil for efficiently managing changes in the data.
  
  

• Problem: Determining the correct data position in nested RecyclerViews can be tricky.
• Solution: Store the parent RecyclerView’s position as a tag in the ViewHolder of the nested RecyclerView. Use that position to map data correctly.
  
  

Displaying Load State and Headers/Footers

Advanced Use Cases for ConcatAdapter

• Use ConcatAdapter to create dynamic forms with multiple sections, such as input fields, dropdowns, and summary sections.
• Each section can have its own adapter, making it easier to modify or rearrange sections.

• Build e-commerce catalogs with sections like "Featured Products," "Trending Items," and "Recently Viewed." Each section can have its own adapter, and they can be combined seamlessly with ConcatAdapter.

• Implement multimedia layouts with sections for videos, images, and articles. ConcatAdapter allows you to switch or reorder these sections easily.
  
  

Debugging Tips for Nested RecyclerViews

1. Log Adapter Positions:
   • Log adapter positions to debug unexpected behaviors, especially when dealing with dynamic data updates.
     
     
2. Validate Layout Managers:
   • Ensure each RecyclerView (parent and child) is using the correct LayoutManager.
     
     
3. Profile Performance:
   • Use Android Studio’s profiler to identify bottlenecks in scrolling or data updates.
     
     
4. Unit Test Adapters:
   • Write unit tests to verify that each adapter handles data correctly, especially when interacting with ConcatAdapter.
     
     

Final Thoughts