RecyclerView and CardView Implementation in Android Kotlin

In this tutorial , I am going to explain how to use RecyclerView and CardView in Kotlin Android.

RecyclerView

RecyclerView is just an advanced version of ListView. It is basically a container for loading larger sets of data to view that can be recycled and scrolled efficiently.

For more details on reyclerview

https://developer.android.com/guide/topics/ui/layout/recyclerview

CardView

CardView was first introduced from Android 5.0. It is usually used in layout for each item within a recyclerview or listview. It is just a framelayout with rounded corners and shawdow based on its elevation.

For more details on cardview

https://developer.android.com/guide/topics/ui/layout/cardview

Now let get started,

1. Create an Project ,Go to file >New > New Project
2. Enter Application name and click next. Make sure if have selected included Kotlin support. You can find a check box for including Kotlin Support at this page.
3. In next page Target Android Devices click Phone and Table and select API version as 5.0 Lollipop. Because cardview supports only from 5.0 version. After finishing all the process, click Next.
4. In next page ,click empty activity.
5. Click Finish. Android studio project has been successfully created.
6. Go to your gradle file and add the dependencies for recyclerView and cardView. It always better to use the latest version. Add the following dependencies and sync project.

implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'

7. In this implementation we are going to user 5 Files. MainActivity.kt — Core ,activity_main.xml,Model.kt, RvAdapter.kt and adapter_item_layout.xml

MainActivity.kt in this file we will declare the recycler view ,set it to the adapter , initialize the Arraylist and add elements to it.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        Set layout file to class
        setContentView(R.layout.activity_main)
//        initialize the recyclerView from the XML
        val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
//        Initializing the type of layout, here I have used LinearLayoutManager you can try GridLayoutManager
//        Based on your requirement to allow vertical or horizontal scroll , you can change it in  LinearLayout.VERTICAL
        recyclerView.layoutManager = LinearLayoutManager(this, LinearLayout.VERTICAL, false)
//        Create an arraylist
        val dataList = ArrayList<Model>()
        dataList.add(Model("Phone", 1))
        dataList.add(Model("Watch", 2))
        dataList.add(Model("Note", 3))
        dataList.add(Model("Pin", 4))
//        pass the values to RvAdapter
        val rvAdapter = RvAdapter(dataList)
//        set the recyclerView to the adapter
        recyclerView.adapter = rvAdapter;
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity">

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

</LinearLayout>

RvAdapter.kt

class RvAdapter(val userList: ArrayList<Model>) : RecyclerView.Adapter<RvAdapter.ViewHolder>() {
    override fun onCreateViewHolder(p0: ViewGroup, p1: Int): ViewHolder {
        val v = LayoutInflater.from(p0?.context).inflate(R.layout.adapter_item_layout, p0, false)
        return ViewHolder(v);
    }
    override fun getItemCount(): Int {
        return userList.size
    }
    override fun onBindViewHolder(p0: ViewHolder, p1: Int) {

        p0.name?.text = userList[p1].name
        p0.count?.text = userList[p1].count.toString()
    }
    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val name = itemView.findViewById<TextView>(R.id.tvName)
        val count = itemView.findViewById<TextView>(R.id.tvCount)

    }
}

adapter_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/tvCount"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</android.support.v7.widget.CardView>

Model.kt

data class Model(val name: String = "", val count: Int = 0)

Hope you find it useful.