How to implement a stacked notification layout using RecyclerView in Android?


I want to implement a notification-style list using a single RecyclerView in Android.

The layout includes:

  • Grouped (stacked) notifications: multiple items combined into one group

  • Normal notifications: displayed as individual items

I would like to handle both types in the same RecyclerView.

However, I’m not sure about the correct approach to design this:

  • How should I structure the data for grouped items?

  • Should I use multiple view types or another pattern?

  • How can I implement this in a clean and efficient way?

I’m still learning this concept, so I would really appreciate if someone could guide me in the right direction.

Also, it would be very helpful if you could suggest some relevant keywords or topics that I should search for to better understand and implement this pattern.

layout image 1 layout image 2
i want to do like this. Please check my video
https://drive.google.com/file/d/1mXJ-9BxI772iPGIUn5DARImlDljdnX_u/view?usp=drive_link

1
Apr 1 at 3:12 PM
User AvatarHùng Phạm
#java#android#kotlin#android-recyclerview#expandablelistadapter

Accepted Answer

1. Structure Your Data

You can't just use a simple List<String>. You need a model that can represent both a single notification and a group of them.

  • The Model: Create a sealed class or an interface.

  • The Logic: A "Group" item should contain a list of "Child" items.

Kotlin

sealed class NotificationItem {
    data class Single(val id: Int, val content: String) : NotificationItem()
    data class Group(val groupId: Int, val title: String, val notifications: List<Single>) : NotificationItem()
}

2. Use Multiple View Types

The core of your RecyclerView.Adapter will be the getItemViewType method. This tells the RecyclerView whether to inflate a standard row or a "stacked" row.

  • View Type 1 (Single): A standard layout with icon, title, and text.

  • View Type 2 (Grouped): A layout that visually looks "stacked."

> [!TIP] The Visual Trick: You don’t actually need to nest another RecyclerView inside the row (that's bad for performance). To get the "stacked" look, use a custom layout with overlapping views or a background drawable that mimics the edges of cards underneath.


3. Implementation Strategy

Here is the step-by-step logic for a clean implementation:

A. The Adapter Logic

In your onCreateViewHolder, use a when statement to inflate different XML files based on the view type.

B. Handling the "Stack" Appearance

To make a group look like a stack of cards:

  1. Static Stack: If the group is collapsed, use an XML layout that has 2-3 overlapping views at the bottom to give the illusion of depth.

  2. Expanding Logic: When a user taps the group, you have two choices:

    • The "Clean" Way: Simply insert the child items into the main list directly below the group header and call notifyItemRangeInserted.

    • The "Simple" Way: Use a library like Groupie or FastAdapter, which handles the math of "expanding/collapsing" groups for you.


4. Keywords for Further Research

If you want to dive deeper into the technical specifics, search for these exact terms:

  • "RecyclerView Multiple View Types": This is the foundation.

  • "Expandable RecyclerView": For the logic of clicking a stack to see the individual notifications.

  • "ItemDecoration for Stacking": If you want to draw the stack shadows/lines programmatically without extra XML views.

  • "DiffUtil": Essential for making sure the "stack" animates smoothly when it opens or closes.

User AvatarEr.Pankaj Kumar
Apr 1 at 6:08 PM
0