How to Show Vertical List in Kotlin using RecyclerView Example

As you know we can use RecyclerView in Android to populate long lists. Using RecyclerView we cannot only populate vertical lists. But we can also populate Grid & horizontal lists. In this article, we will discuss how you can show vertical list in Kotlin using RecyclerView. By following the code explained in the article, you can make the list the same as shown in the image below.

Vertical List in Kotlin using RecyclerView
Vertical List in Kotlin using RecyclerView

A Complete RecyclerView Video Tutorial Series For Kotlin

Example Code

1. Add RecyclerView Dependency

If you have not added RecyclerView Dependency yet. Open your App level build.gradle file, and add one of the following dependencies.

implementation "androidx.recyclerview:recyclerview:1.0.0" 
// or if you are using support library instead of Androidx then 
// implementation 'com.android.support:recyclerview-v7:28.0.0'

2. List Item XML Code

First of all, we need to create a list item XML file. For that create a new file in your res/layout directory with name item_list.xml and paste the following code in it.

<?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="wrap_content"
android:layout_margin="10dp"
android:background="#0000FF"
android:padding="10dp">

<TextView
android:id="@+id/tv_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="List item"
android:textColor="#fff"
android:textSize="20sp"></TextView>

</LinearLayout>

3. Custom RecyclerView Adapter in Kotlin

I have already written an Article on RecyclerView Custom Adapter, In this article, we will use the same code. Create a Kotlin file with the name CustomAdapter.kt and put the following code inside it.

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import java.util.ArrayList
import androidx.recyclerview.widget.RecyclerView

class CustomAdapter(private val context: Context, private val list: ArrayList<String>) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

private inner class ViewHolder internal constructor(itemView: View) : RecyclerView.ViewHolder(itemView) {

internal var tvLabel: TextView

init {
tvLabel = itemView.findViewById(R.id.tv_label) // Initialize your All views prensent in list items
}

internal fun bind(position: Int) {
// This method will be called anytime a list item is created or update its data
//Do your stuff here
tvLabel.text = list[position]
}
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
return ViewHolder(LayoutInflater.from(context).inflate(R.layout.item_list, parent, false))
}

override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
(holder as ViewHolder).bind(position)
}

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

4. Add RecyclerView in Your Activity

Now a very simple step, in your Activity’s XML file where you wan to show the list, add a RecyclerView component in the following way.

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

5. Initialize RecyclerView and assign Adapter to it

Now the last step, initialize this RecyclerView in your Activity and assign Adapter to it, as shown below.

var recyclerView = findViewById<RecyclerView>(R.id.recycler_view)
val data = arrayListOf<String>();
for (i in 1..50) {
data.add("Item " + i)
}

val adapter = CustomAdapter(this, data)
recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.adapter = adapter

In this example, as you can see in the above code, I have put hard-code string with numbers from 1 – 50 to populate my list. But you can populate it with your own data according to your requirements.

That’s it. Here you can find many other helping Android Tutorials.

Please share this post:
Native Mobile Application Developer (Android + IOS) having experience in Java, Swift, Kotlin, Objective C, Unity, C#, C/C++, NODE JS & PHP.

One thought on “How to Show Vertical List in Kotlin using RecyclerView Example

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: