Lets learn building a RecyclerView using Kotlin in this Kotlin RecyclerView Example. Learning the small things will help you to migrate to Kotlin. And yes Kotlin will be surely easy and fun once you’ll get used to it. So lets see this Kotlin RecyclerView Example.
Kotlin RecyclerView Example Video
- You can also go through this video explanation.
Kotlin RecyclerView Example
Creating a New Project
- So first create a new Android Studio project using Kotlin.
- Once the project is loaded come inside the activity_main.xml and remove the Hello World TextView.
Adding RecyclerView
- Now search for RecyclerView and drag it to your activity_main.xml (See the image for help).
- When you will drag RecyclerView it will ask you to add the RecyclerView dependency.
- So the xml code for our activity_main.xml will be.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?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" tools:context="net.simplifiedcoding.recyclerviewexample.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="0dp" android:layout_height="0dp" tools:layout_editor_absoluteX="8dp" tools:layout_editor_absoluteY="8dp" android:layout_marginTop="8dp" android:layout_marginBottom="8dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginStart="8dp" android:layout_marginEnd="8dp" /> </android.support.constraint.ConstraintLayout> |
Creating List Layout using CardView
- Now for the list items we will create a new layout. So create a new layout resource file and name it list_layout.xml.
- Now again to the same search CardView and drag it to the layout you just created. It will again ask you to add CardView dependency.
- Now for the layout use the following xml code. Here I am going to display name and address only. But you can also design anything you want for your list.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <?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" android:orientation="vertical"> <android.support.v7.widget.CardView 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"> <TextView android:id="@+id/textViewUsername" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp" android:text="Belal Khan" android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" /> <TextView android:id="@+id/textViewAddress" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp" android:text="Ranchi, Jharkhand" android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" /> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> |
- Now thats it for the List Layout. The above xml code will generate the following layout.
- Now lets create data class for list model.
Creating Model
- The list is about user so we will create a User class.
- Create a new Kotlin file and write the following code.
1 2 3 4 5 6 7 8 9 | package net.simplifiedcoding.recyclerviewexample /** * Created by Belal on 6/19/2017. */ data class User(val name: String, val address: String) |
- Now lets build the Adapter.
Creating RecyclerView Adapter
- If you have already created a RecyclerView in java, then you may already know that we need an Adapter to display the data in RecyclerView.
- So create a new Kotlin class named CustomAdapter.kt and write the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | package net.simplifiedcoding.recyclerviewexample import android.support.v7.widget.RecyclerView import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.TextView /** * Created by Belal on 6/19/2017. */ class CustomAdapter(val userList: ArrayList<User>) : RecyclerView.Adapter<CustomAdapter.ViewHolder>() { //this method is returning the view for each item in the list override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CustomAdapter.ViewHolder { val v = LayoutInflater.from(parent.context).inflate(R.layout.list_layout, parent, false) return ViewHolder(v) } //this method is binding the data on the list override fun onBindViewHolder(holder: CustomAdapter.ViewHolder, position: Int) { holder.bindItems(userList[position]) } //this method is giving the size of the list override fun getItemCount(): Int { return userList.size } //the class is hodling the list view class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { fun bindItems(user: User) { val textViewName = itemView.findViewById(R.id.textViewUsername) as TextView val textViewAddress = itemView.findViewById(R.id.textViewAddress) as TextView textViewName.text = user.name textViewAddress.text = user.address } } } |
- Now the last step is creating the RecyclerView itself.
Creating RecyclerView
- Now come to MainActivity.kt and write the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | package net.simplifiedcoding.recyclerviewexample 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 class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) //getting recyclerview from xml val recyclerView = findViewById(R.id.recyclerView) as RecyclerView //adding a layoutmanager recyclerView.layoutManager = LinearLayoutManager(this, LinearLayout.VERTICAL, false) //crating an arraylist to store users using the data class user val users = ArrayList<User>() //adding some dummy data to the list users.add(User("Belal Khan", "Ranchi Jharkhand")) users.add(User("Ramiz Khan", "Ranchi Jharkhand")) users.add(User("Faiz Khan", "Ranchi Jharkhand")) users.add(User("Yashar Khan", "Ranchi Jharkhand")) //creating our adapter val adapter = CustomAdapter(users) //now adding the adapter to recyclerview recyclerView.adapter = adapter } } |
- Now thats it for the coding. Lets try running the application.
- As you can see it is working absolutely fine.
So thats all for this Kotlin RecyclerView Example friends. If you are having any confusions and queries then lets discuss it on the comment section. And I will keep posting more tutorials using Android Development with Kotlin as well. And for your side I want you to SHARE this post if you think it is useful. Thank You 🙂
Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.
Hi Belal,
Thank you for posting this tutorial for us, I have some doubt for example When we take kotlin file or class i am little bit confused kindly help me to understand
Thank you
Can we have the complete source code?
Source code is in the video description, check out the video tutorial of this post in youtube.
What is the difference between normal recyclerview and Kotlin Recyclerview ??
Please Give me Description..
No difference basically.. the difference is only about the choice.. you chosen java or kotlin?
I am new to Android development and wanted to experiment with some already written code. I downloaded the code and tried to make it work on Android Studio 3.0 beta 7.
Can you port the code to work on the recent android studio.
am using android studio 2.3.3 am I’ve installed all required kotlin plugins but am not able run your code amd am always getting Caused by: java.lang.ClassNotFoundException:
Thank you! I can not find this but with a search engine in the nav bar … would you have something like that? Thank you!
i am trying the same but my list of card views didn’t show up … can you help
its a best Example for recycler view
Exellent example, the best.
Any chance for a tutorial converting this one to image and text recyclerview?
It would be nice to be able to change this to whatever we want,and have it as template.
Thanks
A really good example, I implemented en androidStudio 4.0 with androidx, there are no errors but when I run it on and Samsun grand prime (5.1.1) the screen is show all white.
The minSdkVersion is 21 (5.0.0)
Could you help me?
Thanks in advance
Luis.
how to implement onclick listner in the above example with images in adapter
how to shift this recyclerview at the bottom of the screen ? i want to do other activity on the top.. like i want to make employee profile page