Android Recycler view in kotlin

Why use RecyclerView?

A RecyclerView is used to display a large list of items with their own specific Views within the user interface in a performance optimised manner. So when we design how we want our recycler view to look and a data is supplied, the RecyclerView library dynamically creates and reuses the elements when they’re needed.

LayoutManager

The RecyclerView uses a LayoutManager to determine how the Views will be placed within the RecyclerView. The different LayoutManagers supported by RecyclerView include:

  • LinearLayoutManager, a vertical or horizontal list of items
  • GridLayoutManager, a grid of items that are all the same size
  • StaggeredGridLayoutManager, a grid of items that supports different sizes

Step by Step Implementation

Step 1: Create a New Project

  1. Install the latest version of Android Studio.
  2. In the Welcome to Android Studio window, click Create New Project.
  3. In the Select a Project Template window, select Empty Activity and click Next.
  4. In the Configure your project window, Enter “T-RecyclerView” in the Name field.
  5. Click Finish.
dependencies{
// for adding recyclerview
implementation 'androidx.recyclerview:recyclerview:1.2.0'

// for adding cardview
implementation 'androidx.cardview:cardview:1.0.0'
}
<?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"
android:orientation="vertical"
tools:context=".MainActivity">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:itemCount="5"
tools:listitem="@layout/recycler_view_item" />

</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="10dp"
app:cardElevation="6dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">

<ImageView
android:id="@+id/imageview"
android:layout_width="40dp"
android:layout_height="40dp" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="15dp"
android:text="Item"
android:textSize="20sp"
android:textStyle="bold" />

</LinearLayout>

</androidx.cardview.widget.CardView>
data class ModelClass(val image: Int, val text: String) {
}
  • onCreateViewHolder(): This function sets the views to display the items. So this method will always be called when a new ViewHolder is created
  • onBindViewHolder(): This function is used to bind the list items to our widgets such as TextView, ImageView, etc. The method fetches the appropriate data and uses the data to fill in the view holder’s layout
  • getItemCount(): It returns the count of items present in the list.
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class AdapterClass(private val mList: List<ModelClass>) : RecyclerView.Adapter<AdapterClass.ViewHolder>() {

// create new views
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
// inflates the card_view_design view
// that is used to hold list item
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.recycler_view_item, parent, false)

return ViewHolder(view)
}

// binds the list items to a view
override fun onBindViewHolder(holder: ViewHolder, position: Int) {

val ModelClass = mList[position]

// sets the image to the imageview from our itemHolder class
holder.imageView.setImageResource(ModelClass.image)

// sets the text to the textview from our itemHolder class
holder.textView.text = ModelClass.text

}

// return the number of the items in the list
override fun getItemCount(): Int {
return mList.size
}

// Holds the views for adding it to image and text
class ViewHolder(ItemView: View) : RecyclerView.ViewHolder(ItemView) {
val imageView: ImageView = itemView.findViewById(R.id.imageview)
val textView: TextView = itemView.findViewById(R.id.textView)
}
}
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

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


// getting the recyclerview by its id
val recyclerview = findViewById<RecyclerView>(R.id.recyclerview)

// this creates a vertical layout Manager
recyclerview.layoutManager = LinearLayoutManager(this)

// ArrayList of class ItemsViewModel
val data = ArrayList<ModelClass>()

// This loop will create 20 Views containing
// the image with the count of view
for (i in 1..20) {
data.add(ModelClass(R.drawable.ic_baseline_folder_24, "Item " + i))
}

// This will pass the ArrayList to our Adapter
val adapter = AdapterClass(data)

// Setting the Adapter with the recyclerview
recyclerview.adapter = adapter

}
}

Where to Go From Here?

A simple RecyclerView implementation like this may be all you need. However, the library also offers many ways to customize your implementation. For more information, see Advanced RecyclerView customization.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store