Add RecyclerView to your layout
Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) and add RecyclerView to your layout file
file : activity_main.kt
<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/rcv"/>
Data Class
file : Model.kt
package com.tutorialsbuzz.recyclerview
data class Model(val name: String, val version: String) {}
To Load Data Into RecyclerView , We will read JSON File Kept Inside Asset folder and map it to above defined data class .
file : main\assets\android_version.json
[
{
"name": "Cupcake",
"version": "Android 1.5"
},
{
"name": "Donut",
"version": "Android 1.6"
},
{
"name": "Eclairs",
"version": "Android 2.0-2.1"
},
{
"name": "Froyo",
"version": "Android 2.2-2.3"
},
{
"name": "Gingerbread",
"version": "Android 2.3-2.3.7"
},
{
"name": "Honeycomb",
"version": "Android 3.0-3.2.6"
},
{
"name": "Icecream",
"version": "Android 4.0-4.0.4"
},
{
"name": "Jellybean",
"version": "Android 4.1-4.3.1"
},
{
"name": "Kitkat",
"version": "Android 4.4-4.4.4"
},
{
"name": "Lolipop",
"version": "Android 5.0-5.1.1"
},
{
"name": "Marshmallow",
"version": "Android 6.0-6.0.1"
},
{
"name": "Nougat",
"version": "Android 7.0-7.1.2"
},
{
"name": "Oreo",
"version": "Android 8.0-8.1"
},
{
"name": "Pie",
"version": "Android 9.0"
}
]
Adapter and ViewHolder For RecyclerView .
1. XML Layout For RecyclerView Item
- Create XML Layout file in res/layout and name it row_item.xml ,
- This Layout defines the layout for Items of RecyclerView . Here In this example we have two TextView inside LinearLayout .
- To Have Ripple Effect Add android:background="?android:attr/selectableItemBackground" property or attribute to item layout.
<?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:padding="20dp"
android:background="?android:attr/selectableItemBackground"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txt"
android:textSize="22sp"
android:text="Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"/>
<TextView
android:id="@+id/sub_txt"
android:textSize="18sp"
android:text="Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="italic"/>
</LinearLayout>
2. Adapter
Create a Adapter That RecyclerView Can Use , Create a class CustomAdapter extend it to RecyclerView.Adapter .
class CustomAdapter(val modelList: List<Model>, val context: Context) :
RecyclerView.Adapter<RecyclerView.ViewHolder>() {
....
....
}
3. ViewHolder
Create Inner class ViewHolder Inside CustomAdapter class and extend it to RecyclerView.ViewHolder .
class CustomAdapter(val modelList: List<Model>, val context: Context) :
RecyclerView.Adapter<RecyclerView.ViewHolder>() {
inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView){
....
....
}
}
4. RecyclerView Item Click Listener
- Inside CustomAdapter Create an Interface ClickListener and add abstract fun/ method click which takes two parameter : Integer (Position of item in recyclerView) and View (View at position)
- Add function setOnItemClickListener inside adapter class , inside this function we will set above defined interface .
- Implement ViewHolder class with View.OnClickListener and override onClick function of it .
- Inside ViewHolder Class Constructor set OnClickListener for itemview .
- Inside onClick call click function of ClickListener inteface by passing position and itemView .
- Inside MainActivity using adapter object call setOnItemClickListener , override onClick of CustomAdapter.ClickListener . show toast message inside onclick func .
package com.tutorialsbuzz.recyclerview
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.row_item.view.*
class CustomAdapter(val modelList: List<Model>, val context: Context) :
RecyclerView.Adapter<RecyclerView.ViewHolder>() {
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
(holder as ViewHolder).bind(modelList.get(position));
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
val layoutInflater = LayoutInflater.from(parent.context)
return ViewHolder(layoutInflater.inflate(R.layout.row_item, parent, false))
}
override fun getItemCount(): Int {
return modelList.size;
}
lateinit var mClickListener: ClickListener
fun setOnItemClickListener(aClickListener: ClickListener) {
mClickListener = aClickListener
}
interface ClickListener {
fun onClick(pos: Int, aView: View)
}
inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView), View.OnClickListener {
init {
itemView.setOnClickListener(this)
}
fun bind(model: Model): Unit {
itemView.txt.text = model.name
itemView.sub_txt.text = model.version
}
override fun onClick(p0: View?) {
mClickListener.onClick(adapterPosition, itemView)
}
}
}
Activity
- Create a koltin class MainActivity.kt and extend it to AppCompatActivity class .
- Override onCreate function and set the content of this MainActivity with above defined xml layout (activity_main.xml).
- Read JSON Data From Asset Folder , this will be used for binding data into recyclerView .
- Set Vertical Linear LayoutManager to RecyclerView.
- Create Instance of Adapter and set to recyclerView .
- Using adapter object Call setOnItemClickListener , override onClick of CustomAdapter.ClickListener show toast message inside onclick func .
file : MainActivity.kt
package com.tutorialsbuzz.recyclerview
import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.activity_main.*
import org.json.JSONArray
import org.json.JSONObject
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val modelList = readFromAsset();
val adapter = CustomAdapter(modelList, this)
rcv.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false)
rcv.adapter = adapter;
adapter.setOnItemClickListener(object : CustomAdapter.ClickListener {
override fun onClick(pos: Int, aView: View) {
Toast.makeText(this@MainActivity, modelList.get(pos).name, Toast.LENGTH_SHORT).show()
}
})
}
private fun readFromAsset(): List<Model> {
val modeList = mutableListOf<Model>()
val bufferReader = application.assets.open("android_version.json").bufferedReader()
val json_string = bufferReader.use {
it.readText()
}
val jsonArray = JSONArray(json_string);
for (i in 0..jsonArray.length() - 1) {
val jsonObject: JSONObject = jsonArray.getJSONObject(i)
val model = Model(jsonObject.getString("name"), jsonObject.getString("version"))
modeList.add(model)
}
return modeList
}
}
 |
 |
No comments:
Post a Comment