Assuming that you already have RecyclerView your layout should look something like this:

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">



<android.support.v7.widget.RecyclerView

android:id="@+id/recyclerView"

android:layout_width="wrap_content"

android:layout_height="match_parent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />



</android.support.constraint.ConstraintLayout>

2. First of all we need to initialise GridLayoutManager for our RecyclerView. I have initialisation code in onCreate() function of my activity.

class MainActivity : AppCompatActivity() {



private var layoutManager: GridLayoutManager? = null

...



override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)



layoutManager = GridLayoutManager(this, 3)

recyclerView.layoutManager = layoutManager

...

}



...

}

3. The next step is to create adapter. I’ve written `SimpleAdapter` class that has link to layoutManager of our recycler view.

class SimpleAdapter(

private val layoutManager: GridLayoutManager? = null

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



... override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {

return ...

}



override fun onBindViewHolder(p0: RecyclerView.ViewHolder, p1: Int) {

}



override fun getItemCount() = 5



override fun getItemViewType(position: Int): Int {

...

}

}

And attach it to RecyclerView in onCreate() of activity. Now it should look like this:

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)



layoutManager = GridLayoutManager(this, 3)

recyclerView.layoutManager = layoutManager

adapter = SimpleAdapter(layoutManager)

recyclerView.adapter = adapter

}

4. The last but not the least step — create 2 view holders for different modes.

and

Layout for simple_item.xml :

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="110dp"

android:layout_height="144dp"

android:layout_margin="8dp"

android:background="@color/colorPrimaryDark" />

Layout for detailed_item.xml :