RecyclerView is a ViewGroup ,that display a scrolling list of elements based on large data sets (or data that frequently changes),RecyclerView widget is more flexible and efficient version of ListView.
CardView :
A FrameLayout with a rounded corner background and shadow, CardView uses elevation property on Lollipop for shadows and falls back to a custom emulated shadow implementation on older platforms.
Adding RecyclerView and CardView
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.xml
<?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"
}
]
Image Resource
Name field from json matches to respective png file name kept inside drawable .
Folder : app\src\main\res\drawable
Adapter and ViewHolder For RecyclerView .
1. Adding CardView For RecyclerView Item Layout.
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 .
Ripple effect on Android CardView add below property/attribute to cardview
- android:foreground="?android:attr/selectableItemBackground"
- android:clickable="true"
- android:focusable="true"
Adding CardView To Layout
file : row_item.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardUseCompatPadding="true"
card_view:cardElevation="5dp"
card_view:contentPadding="10dp">
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:orientation="vertical">
<ImageView android:layout_width="80dp"
android:layout_height="80dp"
android:id="@+id/img"
android:contentDescription="@string/app_name"/>
<TextView
android:id="@+id/txt"
android:textSize="22sp"
android:text="Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_toRightOf="@+id/img"
android:layout_marginStart="20dp"/>
<TextView
android:id="@+id/sub_txt"
android:textSize="18sp"
android:text="Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="italic"
android:layout_toRightOf="@+id/img"
android:layout_below="@+id/txt"
android:layout_marginStart="20dp"
/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
Create a Adapter That RecyclerView Can Use ,Create a class CustomAdapter extend it to RecyclerView.Adapter .
RecyclerView.Adapter has three abstract methods that we must override .
- onCreateViewHolder() :Inside this method we specify the layout that each item of the RecyclerView should use ,onCreateViewHolder has return type of RecyclerView.ViewHolder which represent each row of recyclerView.Using Inflator get the view of above defined row_item and pass it to viewholder constructor and then return.
- onBindViewHolder() : Inside this method data will be displayed at the specified position .
- getItemCount() : Returns the total number of items in the data set held by the adapter.
Create Inner class ViewHolder extend it to RecyclerView.ViewHolder add bind function which takes above defined model data class object
file : CustomAdapter.kt
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 com.tutorialsbuzz.recyclerviewwithcardview.R
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)
}
override fun onClick(p0: View?) {
mClickListener.onClick(adapterPosition, itemView)
}
fun bind(model: Model): Unit {
itemView.txt.text = model.name
itemView.sub_txt.text = model.version
val id = context.resources.getIdentifier(model.name.toLowerCase(), "drawable", context.packageName)
itemView.img.setBackgroundResource(id)
}
}
}
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 .
file : MainActivity.kt
package com.tutorialsbuzz.recyclerviewwithcardview
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.tutorialsbuzz.recyclerview.CustomAdapter
import com.tutorialsbuzz.recyclerview.Model
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) as RecyclerView.LayoutManager?
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