Add Image Into RecyclerView Android Using Kotlin

Issue

how I can add image from drawable dynamically into recycler view using kotlin? Here is my MainActivity.kt

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)
    binding.get = Get()

    //parse array klaxon
    var products = Klaxon().parseArray<ProductData>(addProducts())
    if (!products!!.isEmpty()) {
        product_list.layoutManager = LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)
        product_list.hasFixedSize()
        product_list.adapter = ProductAdapter(products, { item: ProductData-> item })
    }
}

private fun addProducts(): String {
    return application.assets.open("product_data.json").bufferedReader().use{
        it.readText()
    }
}

private fun read(): String {
    return application.assets.open("text.json").bufferedReader().use{
        it.readText()
    }
}

fun Get() : Data {
    val data = Klaxon()
            .parse<Data>(read())
    if(data == null) return Data(
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            ""
    )
    return data
}
}

Here is my adapter ProductAdapter

class ProductAdapter (var productList: List<ProductData>, var clickListener: (ProductData) -> Unit) :
    RecyclerView.Adapter<RecyclerView.ViewHolder>() {

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

override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
    (holder as ListHolder).bind(productList[position], clickListener)
}

override fun getItemCount() = productList.size

class ListHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    fun bind(_list: ProductData, clickListener: (ProductData) -> Unit) {
        itemView.product_item.text = _list.product_name
        itemView.setOnClickListener { clickListener(_list) }
    }
}
}

and here is my data class, ProductData.kt

data class ProductData (
    var product_name: String
//do I need to declare the image here?
)

and here I fetch the data using JSON, product_data.json

[ {
"product_name": "A",
"product_image": "A.jpg"
  },
  {
    "product_name": "B",
    "product_image": "B.jpg"
  },
  {
    "product_name": "C",
    "product_image": "C.jpg"
  }
]

I was able to show the recycler view, but not with image data. I need to put image in top of product_name. Should I use picasso for it? or not? Thanks in advance.

Solution

JSON

[ { "product_name": "Flexible Hose Tangki Air Penguin", "product_image": "android" }, { "product_name": "Foot Valve / Tusen Klep Tangki Air Penguin", "product_image": "ios" }, { "product_name": "Gasket Aksesoris Tangki Air Penguin", "product_image": "blackberry" } ]

If you want to show image from drawable then add one more field in your ProductData class

data class ProductData (
var product_name: String , 
var product_image: String
)

Add data in ProductData class like below

var androidProduct =  ProductData(productnamefromjson,productimagenamefromjson)

Pass context parameter via constructor in ProductAdapter class -

class ProductAdapter (var context: Context,var productList: List<ProductData>, var clickListener: (ProductData) -> Unit) : RecyclerView.Adapter<RecyclerView.ViewHolder>() 

Change this line from

product_list.adapter = ProductAdapter(products, { item: ProductData-> item })

to

product_list.adapter = ProductAdapter(this@MainActivity,products, { item: ProductData-> item })

Set image in imageview like below -

val resources = context.getResources()
val resourceId = context.resources.getIdentifier(_list.product_image), "drawable",
            context.getPackageName())
itemview.imageview.setImageDrawable(resources.getDrawable(resourceId))

Answered By - Farman Ali Khan