RecyclerView with Kotlin

Hello Guys, RecylerView is most used control for display list of data in mobile device. Today i'm gonna explain you how to use RecyclerView in kotlin.



1) Create layout file containing RecyclerView : layout_list.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycleView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"/>
</LinearLayout>

2) Create layout file containing RecyclerView inner layout : layout_list_cell.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="?android:attr/selectableItemBackground"
            android:padding="10dp">

            <TextView
                android:id="@+id/textViewName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Chirag Limbachiya"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />

            <TextView
                android:id="@+id/textViewAddress"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="Visnagar, Gujarat"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

3) Create user modal file for data class : User.kt


data class User(val name : String, val address : String);

Above modal class contains only one line with class constructor with two parameters. Note : You can write modal file with getter-setter method also as we write in normal java class.

4) Create RecylerView Adapter class for binding data : UserDataAdapter.kt


package adapters

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
import com.example.chirag.kotlindemo.R
import modal.User

/**
 * Created by chirag on 31/7/17.
 */
class UserDataAdapter(val userList: ArrayList<User>) : RecyclerView.Adapter<UserDataAdapter.ViewHolder>(){

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): UserDataAdapter.ViewHolder{
        val view = LayoutInflater.from(parent.context).inflate(R.layout.list_cell, parent, false)
        return ViewHolder(view);
    }

    override fun onBindViewHolder(holder: UserDataAdapter.ViewHolder, position: Int) {
        holder.bindViewItems(userList[position])

    }

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

    /**
     * Make ViewHolder class for recyclerview holder items
     */
    class ViewHolder(val viewItem : View): RecyclerView.ViewHolder(viewItem){

        fun bindViewItems(user : User){

            val textViewName = viewItem.findViewById(R.id.textViewName) as TextView
            val textViewAddress = viewItem.findViewById(R.id.textViewAddress) as TextView

            textViewName.text = user.name;
            textViewAddress.text = user.address

            viewItem.setOnClickListener { showToast(user) }
        }

        private fun showToast(user : User) {

            Toast.makeText(viewItem.context, user.name, Toast.LENGTH_SHORT).show()
        }
    }

}

5) Finally create our MainActivity class : RecylerViewActivity.kt


package com.example.chirag.kotlindemo

import adapters.UserDataAdapter
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import android.widget.LinearLayout
import modal.User

class RecyclerActivity : AppCompatActivity() {


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

        //initialize recyclerview from layout file
        val recyclerView = findViewById(R.id.recycleView) as RecyclerView

        //adding layout manager to display data in recyleview
        recyclerView.layoutManager = LinearLayoutManager(this, LinearLayout.VERTICAL, false)

        //create list of array for user
        val userList = ArrayList<User>()
        userList.add(User("Chirag Limbachiya", "Visnagar, Gujarat"))
        userList.add(User("Vinod Pathan", "Patiala, Punjab"))
        userList.add(User("Rajesh Arora", "Gaya, Bihar"))
        userList.add(User("Gyorge D'soza", "Panji, Goa"))
        userList.add(User("Radhe Gopal", "Ujjain, MP"))
        userList.add(User("Krishnan Ramgopal", "Mamalampuram, Chennai"))
        //Create user adapter
        val userAdapter = UserDataAdapter(userList)
        //Bind user adapter to RecyclerView
        recyclerView.adapter = userAdapter;

    }
}

Do same as above...Good Luck...;)

Comments