How to use RecyclerView (Android Dev)

I’ve been using ListView for a long time now, just recently I had to add a list on our mobile project, and I happen to stumble upon an article talking about RecyclerView (I wasn’t aware it existed that time). What I think is better in RecyclerView is how easy it is to use and implement custom Item View.

To make it easier for other Android developers who are just about to start on their next project that uses a list, I decided to create this short info (sort of tutorial) page on how I used RecyclerView to replace my ListView.

So here’s how I went through to implement RecyclerView :

first I add the View/widget to my layout resource file :

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

(this would be like my ListView, and individual item views will be placed inside it)

then on my Fragment I created a reference to my RecyclerView:

listView = v.findViewById<RecyclerView>(R.id.list)
listView.setHasFixedSize(true)
val lm = LinearLayoutManager(activity)
lm.orientation = LinearLayoutManager.VERTICAL
listView.layoutManager = lm

Afterwards, I define my ViewHolder (this is the individual item view) :

class HouseViewHolder : RecyclerView.ViewHolder {
    public var vName: TextView
    public var vExpires: TextView
    var btnPostAd : Button
    var btnInfo : Button
    var vCost : TextView

    constructor(v: View) : super(v) {
        vName = v.findViewById<View>(R.id.listTitle) as TextView
        vExpires = v.findViewById<View>(R.id.expire_on) as TextView
        btnPostAd = v.findViewById<Button>(R.id.btnPostAd)
        btnInfo = v.findViewById<Button>(R.id.btnInfo)
        vCost = v.findViewById<TextView>(R.id.cost)
    }

}

then I also created my Adapter (this will be the data handler responsible for tying up data to the view) :

class HouseCardAdapter  : RecyclerView.Adapter<HouseViewHolder> {

    private var houseList : List<House>
    private var listener : HouseActionListener

    interface HouseActionListener {
        fun clickItem(i: Int)
        fun clickAdCreate(i: Int)
    }

    constructor(list : List<House>, listener : HouseActionListener) {
        this.houseList = list
        this.listener = listener
    }


    override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): HouseViewHolder {
        val itemView = LayoutInflater.from(parent!!.context)
                .inflate(R.layout.house_list_item, parent, false)
        return HouseViewHolder(itemView)
    }

    override fun getItemCount(): Int {
        return this.houseList.size
    }

    override fun onBindViewHolder(holder: HouseViewHolder?, position: Int) {
        val house = houseList.get(position)
        holder!!.vName.text = house.name
        holder!!.vExpires.text = house.adExpiresOn
        holder!!.vCost.text = house.cost.toString() + " / month"

        holder!!.btnPostAd.setOnClickListener(object : View.OnClickListener {
            override fun onClick(p0: View?) {
                listener.clickAdCreate(position)
            }
        })
        holder!!.btnInfo.setOnClickListener(object : View.OnClickListener {
            override fun onClick(p0: View?) {
                listener.clickItem(position)
            }
        })
    }


}

R.layout.house_list_item is the layout resource for the individual items. You’ll need to create your’s  first.

that’s it! we now have a Data Adapter for the RecyclerView and a ViewHolder class for handling the layout for each individual items.

We’ll only need to attache the adapter to the actual RecyclerView object :

listView.adapter = HouseCardAdapter(houses, this)

houses is  an ArrayList of my custom class House.