Search code examples
androidandroid-databindingandroid-glide

How to bind RecyclerView image using Glide from data class


I am trying to bind recycler view with databinding class that is working perfectly with following code

@BindingAdapter("retailPrice")
fun TextView.setRetailPrice(item: VegetableDailyPriceCalender?){
    item?.let {
        text = item.retailPrice.toString()
    }
}

@BindingAdapter("ourPrice")
fun TextView.setOurPrice(item: VegetableDailyPriceCalender?){
    item?.let {
        text = item.ourPrice.toString()
    }
}

@BindingAdapter("itemName")
fun TextView.setItemName(item: VegetableDailyPriceCalender?){
item?.let {
    text = item.vegetable.name
    text
}
}

@BindingAdapter("itemImage")
fun ImageView.setSleepImage(item: VegetableDailyPriceCalender?) {
item?.let {
    setImageResource(R.drawable.ic_launcher_foreground)
}
}

Now I want to convert last binding to load dynamic image from internet using Glide library Glide need code like below

fun bindImage(imgView: ImageView, imgUrl: String?){
    imgUrl?.let {
        val imgUri = it.toUri().buildUpon().scheme("https").build()
        Glide.with(imgView.context)
            .load(imgUri)
            .apply(
                RequestOptions()
                    .placeholder(R.drawable.loading_animation)
                    .error(R.drawable.ic_broken_image))
            .into(imgView)
    }
}

Any suggestion will be very helpful.

UPDATE... I tried following way but confused what to pass into with() and into()

fun ImageView.setSleepImage(item: VegetableDailyPriceCalender?) {
    val imgUri = item.vegetable.photoUrl.toUri().buildUpon().scheme("https").build()
    item?.let {
        setImageResource(Glide.with(imgView.context)
            .load(imgUri)
            .apply(
                RequestOptions()
                    .placeholder(R.drawable.loading_animation)
                    .error(R.drawable.ic_broken_image))
            .into(imgView))
    }
}

Solution

  • Create BindingAdapter like below:

    @BindingAdapter("imageUrl")
    fun setImageUrl(imgView: ImageView, imgUrl: String?){
    
        imgUrl?.let {
            val imgUri = it.toUri().buildUpon().scheme("https").build()
            Glide.with(imgView.context)
                .load(imgUri)
                .apply(
                    RequestOptions()
                        .placeholder(R.drawable.loading_animation)
                        .error(R.drawable.ic_broken_image))
                .into(imgView)
        }
    }
    

    And use like below:

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        imageUrl="@{viewModel.imageUrl}"/>
    

    You can also use extension function like your's one

    @BindingAdapter("itemImage")
    fun ImageView.setSleepImage(item: VegetableDailyPriceCalender?) {
        val imgUri = item.vegetable.photoUrl.toUri().buildUpon().scheme("https").build()
        item?.let {
            Glide.with(context)
                .load(imgUri)
                .apply(
                    RequestOptions()
                        .placeholder(R.drawable.loading_animation)
                        .error(R.drawable.ic_broken_image))
                .into(this)
        }
    }