load image by picasso in recyclerview by databinding kotlin

Question

I want to use databinding to load image by Picasso in recycler view but when I don't know how to use @BindingAdapter in my recycler view data class. I know how it is worked in java but in kotlin I don't know how to use it. This is my data class for my adapter:

data class Users(val name: String,
             val email: String,
             val img_link: String)

And this is my adapter:

class AdapterRecPart02(private val context: Context, private val ls: List<Users>) :
RecyclerView.Adapter<AdapterRecPart02.ItemAdapter>() {


override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemAdapter {

    val inflater = LayoutInflater.from(context)
    val binding: LayoutRecPart02Binding =
        DataBindingUtil.inflate(inflater, R.layout.layout_rec_part02, parent, false)
    return ItemAdapter(binding)
}

override fun onBindViewHolder(holder: ItemAdapter, position: Int) {

    holder.bind(ls[position])

}

override fun getItemCount(): Int = ls.size


inner class ItemAdapter(private val bindingAdapter: LayoutRecPart02Binding) :
    RecyclerView.ViewHolder(bindingAdapter.root) {

    fun bind(user: Users) {

        bindingAdapter.users = user
        bindingAdapter.executePendingBindings()

    }


}

}

And this is my custom layout for my adapter:

<?xml version="1.0" encoding="utf-8"?>

<data>

    <variable
        name="users"
        type="ir.xs.mvvm.model.Users" />

</data>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/img_user"
        android:layout_width="120dp"
        android:layout_height="120dp" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/img_user"
        android:text="@{users.name, default = name}"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_name"
        android:layout_marginTop="16dp"
        android:layout_toRightOf="@+id/img_user"
        android:text="@{users.email, default = email}"
        android:textSize="16sp" />

</RelativeLayout>

Answer 1

Here is a simple binding adapter that will use Picasso to load an image:

@BindingAdapter("urlImage")
fun bindUrlImage(view: ImageView, imageUrl: String?) {
    if (imageUrl != null) {
        Picasso.get()
            .load(imageUrl)
            .fit()
            .centerCrop()
            .into(view)
    } else {
        view.setImageBitmap(null)
    }
}

Here is how you would use this binding adapter in a data binding layout:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:binding="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    
    
    <data>

        <variable
            name="imageUrl"
            type="String" />


    </data>
    
    
    //.......
    
    
    <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/myImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                binding:urlImage="@{ imageUrl }" />
                
</layout>

For the specific case in the question, here is how you would bind the image url:

 <ImageView
    android:id="@+id/img_user"
    android:layout_width="120dp"
    android:layout_height="120dp"
    binding:urlImage="@{ users.img_link }" />