android - What is the best practice to group items into CardView? -

cardview used decorate 1 element. need wrap widget several items. in inbox app, example.

so best way this? can implemented via custom layoutmanager or custom itemdecoration. implementation of custom layoutmanager not easy task(with full support of animations, item decorations, etc). in second option, drawing of boundaries must implemented manually, ignoring cardview(and android-l elevation) implementation.

tl;dr:

it's not one cardview hosts elements, it's several successive cardviews different margins:

for top cardview in group:

    android:layout_margintop="5dp"     android:layout_marginleft="5dp"     android:layout_marginright="5dp"     android:layout_marginbottom="0dp"     card_view:cardcornerradius="0dp" 

for bottom cardview in group:

    android:layout_margintop="0dp"     android:layout_marginleft="5dp"     android:layout_marginright="5dp"     android:layout_marginbottom="5dp"     card_view:cardcornerradius="0dp" 

and middle one, set margins top&bottom 0:

    android:layout_margintop="0dp"     android:layout_marginleft="5dp"     android:layout_marginright="5dp"     android:layout_marginbottom="0dp"     card_view:cardcornerradius="0dp" 

about inbox app:

this hierarchy of app (of course, simplified bit):

|android.support.v4.widget.drawerlayout
---|framelayout
-------|android.support.v7.widget.recyclerview
-------|android.support.v7.widget.toolbar
---|android.support.design.widget.navigationview

the full structure without navigation drawer & collapsed cards looks like:

the interesting part starts, when dive recyclerview's items structure.
there're 2 types of items google uses - separators (with date , actions on right) , cards. though cards have different content inside, viewholder perspective - recyclerview has 2 types of items)

1. separator

   this 1 linearlayout textview , imageview inside:

   

2. item card
   

   its layout adjusts based on content being bind viewholder example, simple email 1 in focus cardview nested imageview , 3 textviews:

   

so question left, how google-guys "merge" cards 1 big card , avoid shadows.

the trick simple:

1. all cardview's have card_view:cardcornerradius="0dp"

2. top cardview of group have margin set 5dp top/left/right, 0dp bottom:

   android:layout_margintop="5dp" android:layout_marginleft="5dp" android:layout_marginright="5dp" android:layout_marginbottom="0dp" 

3. bottom cardview of group have margin set 5dp left/right/bottom, 0dp top:

   android:layout_margintop="0dp" android:layout_marginleft="5dp" android:layout_marginright="5dp" android:layout_marginbottom="5dp" 

4. middle cardview of group have margin set 5dp left/right, 0dp top/bottom:

   android:layout_margintop="0dp" android:layout_marginleft="5dp" android:layout_marginright="5dp" android:layout_marginbottom="0dp" 

that's it!

here's small example i've wrote:

the layout (with tricky margins)

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:padding="16dp"     xmlns:card_view="http://schemas.android.com/apk/res-auto">     <android.support.v7.widget.cardview         android:layout_gravity="center"         android:layout_width="match_parent"         android:layout_height="100dp"         android:layout_margintop="5dp"         android:layout_marginleft="5dp"         android:layout_marginright="5dp"         android:layout_marginbottom="0dp"         card_view:cardcornerradius="0dp"         card_view:contentpadding="10dp">         <framelayout             android:layout_width="match_parent"             android:layout_height="match_parent">             <textview                 android:text="card1"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:textstyle="bold"/>         </framelayout>     </android.support.v7.widget.cardview>     <android.support.v7.widget.cardview         android:layout_gravity="center"         android:layout_width="match_parent"         android:layout_height="100dp"         android:layout_margintop="0dp"         android:layout_marginleft="5dp"         android:layout_marginright="5dp"         android:layout_marginbottom="0dp"         card_view:cardcornerradius="0dp"         card_view:contentpadding="10dp">         <framelayout             android:layout_width="match_parent"             android:layout_height="match_parent">             <textview                 android:text="card2"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:textstyle="bold"/>         </framelayout>     </android.support.v7.widget.cardview>     <android.support.v7.widget.cardview         android:layout_gravity="center"         android:layout_width="match_parent"         android:layout_height="100dp"         android:layout_margintop="0dp"         android:layout_marginleft="5dp"         android:layout_marginright="5dp"         android:layout_marginbottom="5dp"         card_view:cardcornerradius="0dp"         card_view:contentpadding="10dp">         <framelayout             android:layout_width="match_parent"             android:layout_height="match_parent">             <textview                 android:text="card3"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:textstyle="bold"/>         </framelayout>     </android.support.v7.widget.cardview> </linearlayout> 

i hope, helps