RecyclerView Android example with CardView in Kotlin

RecyclerView Android: RecyclerView widget is used to show the List of the item in the Android application. You can show lists in Horizontally, Vertically, Grids, and Staggered Grids manners using LayoutMangers. And if You want your own layout managers that suits your needs, you can create your own by extending the RecyclerView.LayoutManager abstract class.

In Android SDK provides a Support Library that includes Standard Layout Managers to show you time in a different manner.

• LinearLayoutManager arranges the items in a one-dimensional list (Horizontally or Vertically). You can use a RecyclerViewwith providesLinearLayoutManager functionality likeListView the layout.
• GridLayoutManager arranges the items in a two-dimensional grid, like the squares on a checkerboard. You can use a RecyclerView with GridLayoutManager, which provides functionality like GridView layout.
• StaggeredGridLayoutManager arranges the items in a two-dimensional grid, with each column slightly offset from the one before.

A most important feature of RecyclerView is reuse (or recycle) a view. RecyclerView is using a layout manager to position the single items on the screen and find the available reuse item view (not showing to the user). Reuse item views are not visible to the user.

To reuse (or recycle) a view, a layout manager may communicate the adapter to replace the contents of the view with a different element from the dataset. Recycling views in this manner improve performance by avoiding the creation of unnecessary views or performing expensive findViewById() lookups.

Let’s start building a List with RecyclerView Android

This tutorial you will learn how to create a list of items, using recyclerView and cardView. This is a simple example to learn base knowledge about android app development.

Step 1. Create new project “Build Your First Android App in Kotlin“

Step 2. Add design library in build.gradle (Module app)

dependencies { ...
implementation 'com.android.support:design:28.0.0-alpha1'
}

it’s for RecyclerView API and its updating time to time please check with google doc or add from “open modules settings”

Step 3. Add RecyclerView in activity_main.xml file

Before doing it,  add “@color/colorGrey”  in res/values/color.xml resources, in <resource> tag

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorGrey">#e7e7e7</color>
</resources>

Then add RecyclerView

<?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"
    android:background="@color/colorGrey"
    app:cardUseCompatPadding="true"
    tools:context="in.eyehunt.recyclerviewExample.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="467dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:scrollbars="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Step 4. create new XML file row_user.xml (for items in the list) and add following code.

Add TextView in CardView (you can add more widget in a row)

<?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="33dp"
    android:layout_marginBottom="1dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp" />

</android.support.v7.widget.CardView>

Step 5.  Create model class Users.kt class

This is the beauty of Kotlin no needs to create getter and setter 🙂

package `in`.eyehunt.recyclerviewExample

class Users {
    var id: Int = 0
    var login: String? = null
}

Step 6. Create an adapter class Myadapter.kt kotlin class

package `in`.eyehunt.recyclerviewExample

import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import java.util.ArrayList

class Myadapter(private val mDataList: ArrayList<Users>) : RecyclerView.Adapter<Myadapter.MyViewHolder>() {

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

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.tv_login.text = mDataList[position].login
    }

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

    inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        internal var tv_login: TextView

        init {
            tv_login = itemView.findViewById<View>(R.id.tv_login) as TextView
        }
    }
}

Step 7. final add following code in MainActivity.kt

package `in`.eyehunt.recyclerviewExample

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import java.util.ArrayList

class MainActivity : AppCompatActivity() {

    private var mRecyclerView: RecyclerView? = null
    private var mAdapter: RecyclerView.Adapter<*>? = null
    var listOfusers: ArrayList<Users> = ArrayList()

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

        //adding items in list
        for (i in 0..4) {
            val user = Users()
            user.id = i
            user.login = "Eyehunt $i"
            listOfusers!!.add(user)
        }
        mRecyclerView = findViewById(R.id.my_recycler_view)
        var mLayoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)
        mRecyclerView!!.layoutManager = mLayoutManager
        mAdapter = Myadapter(listOfusers)
        mRecyclerView!!.adapter = mAdapter

    }
}

Step 4. Run the application, in the emulator or On your Android device

Output screenshot RecyclerView Android example in kotlin

Download RecyclerView Android example in kotlin source code  :

https://github.com/EyeHunts/RecyclerviewExampleKotlin

Note : This example (Project) is developed in Android Studio 3.0.1 ,tested on Android 7.1.1 ( Android Nougat), compile SDK version API 26: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”26″

Coding in Kotlin

Bonus: Create a custom List with RecyclerView using CardView in JAVA