Android RecyclerView with GridLayoutManager

Here is an example of displaying a list of items in grids with 2 columns and N rows depending on the size of the list.

Dependencies

implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
implementation 'com.android.support:cardview-v7:26.1.0'
implementation 'com.android.support:recyclerview-v7:26.1.0'

MainActivity.kl, the important line below that makes the list a grid list is val gridLayoutManager = GridLayoutManager(this,2), where 2 means make it two columns.

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.GridLayoutManager
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val topics = listOf<String>("Education","Finance","Government","Entertainment","Technology","Math","Biology","Physics","Chemistry","Space","Sports","Music","Animal","Countries","Weather","Politics","Traffic","Poverty","Social Media","Internet","Housing")
        val gridLayoutManager = GridLayoutManager(this,2)
        val gridListAdapter = GridListAdapter(topics)

        recycler_view.setHasFixedSize(true)
        recycler_view.layoutManager = gridLayoutManager
        recycler_view.adapter = gridListAdapter
    }
}

list_item.xml, the layout file for each grid. It’s a simple CardView with only one text view inside it.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardUseCompatPadding="true">
    <TextView
        android:id="@+id/topic"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:gravity="center"
        tools:text="Education"/>
</android.support.v7.widget.CardView>

activity_main.xml, the main screen layout file hosting the RecyclerView for displaying a list of items.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.gridlayout.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

</android.support.constraint.ConstraintLayout>

GridListAdapter.kl, the grid list adapter, it’s the same as a normal recyclerview adapter for vertical or horizontal list.

import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import android.widget.Toast

class GridListAdapter(private val itemList: List<String>) : RecyclerView.Adapter<GridListAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val layoutView = LayoutInflater.from(parent.context).inflate(R.layout.list_item, null)
        return ViewHolder(layoutView)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.tvTopic.text = itemList[position]
    }

    override fun getItemCount() = itemList.size

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView), View.OnClickListener {
        var tvTopic: TextView

        init {
            itemView.setOnClickListener(this)
            tvTopic = itemView.findViewById<View>(R.id.topic) as TextView
        }

        override fun onClick(view: View) {
            Toast.makeText(view.context,
                    "Clicked Position = " + adapterPosition, Toast.LENGTH_SHORT)
                    .show()
        }
    }
}

Complete example in Github

Search within Codexpedia

Custom Search

Search the entire web

Custom Search