java - 2-vertical and 2-horizontal card views inside recyclerview android -

i want create following ui single list of dataset.

i tried using multiple view type not achieve requirement. implemented blog android horizontal , vertical recyclerview example.

but uses 2 recyclerviews , there 2 sets of data (horizontal data , vertical data).

i have tried one. recyclerview multiple views using custom adapter in android

but using static card views in xml , loading them in adapter.

i'm beginner in android development. please help!

thank in advance.

your desired layout can achieved using gridlayoutmanager along 2 "item view types" inside recyclerview.adapter.

here layout xml files:

activity_main.xml:  -------------------------    <?xml version="1.0" encoding="utf-8"?>  <android.support.v7.widget.recyclerview      xmlns:android="http://schemas.android.com/apk/res/android"      android:id="@+id/recycler"      android:layout_width="match_parent"      android:layout_height="match_parent"/>        horizontal.xml:  -------------------------    <android.support.v7.widget.cardview      xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"      android:layout_height="120dp"      android:layout_margin="4dp">        <linearlayout          android:layout_width="match_parent"          android:layout_height="match_parent"          android:orientation="horizontal">            <imageview              android:id="@+id/image"              android:layout_width="0dp"              android:layout_height="match_parent"              android:layout_weight="1"              android:background="#ccc"/>            <textview              android:id="@+id/text"              android:layout_width="0dp"              android:layout_height="match_parent"              android:layout_weight="1"              android:gravity="center"              android:background="#fff"              android:textcolor="#000"              android:textsize="18sp"              android:text="text"/>        </linearlayout>    </android.support.v7.widget.cardview>    vertical.xml:  -------------------------    <android.support.v7.widget.cardview      xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"      android:layout_height="120dp"      android:layout_margin="4dp">        <linearlayout          android:layout_width="match_parent"          android:layout_height="match_parent"          android:orientation="vertical">            <imageview              android:id="@+id/image"              android:layout_width="match_parent"              android:layout_height="0dp"              android:layout_weight="1"              android:background="#ccc"/>            <textview              android:id="@+id/text"              android:layout_width="match_parent"              android:layout_height="0dp"              android:layout_weight="1"              android:gravity="center"              android:background="#fff"              android:textcolor="#000"              android:textsize="18sp"              android:text="text"/>        </linearlayout>    </android.support.v7.widget.cardview>

and here java file:

public class mainactivity extends appcompatactivity {        @override      protected void oncreate(bundle savedinstancestate) {          super.oncreate(savedinstancestate);          setcontentview(r.layout.activity_main);            gridlayoutmanager manager = new gridlayoutmanager(this, 2);          manager.setspansizelookup(new gridlayoutmanager.spansizelookup() {              @override              public int getspansize(int position) {                  return (position % 4) < 2 ? 2 : 1;              }          });            recyclerview recycler = (recyclerview) findviewbyid(r.id.recycler);          recycler.setlayoutmanager(manager);          recycler.setadapter(new myadapter());      }        private static class myadapter extends recyclerview.adapter<myviewholder> {            @override          public int getitemviewtype(int position) {              return (position % 4) < 2                      ? r.layout.horizontal                      : r.layout.vertical;          }            @override          public myviewholder oncreateviewholder(viewgroup parent, int viewtype) {              layoutinflater inflater = layoutinflater.from(parent.getcontext());              view itemview = inflater.inflate(viewtype, parent, false);              return new myviewholder(itemview);          }            @override          public void onbindviewholder(myviewholder holder, int position) {              holder.image.setimageresource(r.drawable.mouse);              holder.text.settext("" + position);          }            @override          public int getitemcount() {              return integer.max_value;          }      }        private static class myviewholder extends recyclerview.viewholder {            private final imageview image;          private final textview text;            public myviewholder(view itemview) {              super(itemview);              this.image = (imageview) itemview.findviewbyid(r.id.image);              this.text = (textview) itemview.findviewbyid(r.id.text);          }      }  }

let's go on important parts. first combination of gridlayoutmanager , spansizelookup. we're creating layout manager line:

gridlayoutmanager manager = new gridlayoutmanager(this, 2); 

which means that, default, there 2 cards in each row of our grid. apply spansizelookup, says half of our rows (found statement position % 4 < 2) should take 2 columns. we'll have 1 card, 1 card, 2 cards repeating in our "grid".

then, in recyclerview.adapter class, override getitemviewtype() method. here again use position % 4 < 2 statement half of our views should horizontal, , half should vertical.

getitemviewtype() needs return unique int each view type, use nice trick of returning r.layout constants method. since view type passed oncreateviewholder(), can use viewtype argument inflate correct layout.

and that's it! not bad after all. here's screenshot of code in action: