Android: Set placeholder image using Glide - DataBinding

Question

Loading an image through data binding is easy. I am using Glide in my project. I have to set placeholder image which will change as per some selection by user. Can we use some expression which accepts imageurl and placeHolder image reference.

<androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/vehicle_1_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_twenty"
        app:layout_constraintEnd_toEndOf="@id/centerGuideline"
        app:layout_constraintStart_toStartOf="@id/centerGuideline"
        app:layout_constraintTop_toBottomOf="@id/txt_enter_vehicle_name"
        app:loadImage="@{viewModel.imgUrl}" />

@BindingAdapter({"loadImage"})
public static void loadUrlImage(ImageView view, String url, int placeHolderImage){
    ImageLoaderUtil.getInstance().loadImageWithCache(view, url, placeHolderImage);
}

public void loadImageWithCache(ImageView imageView, String url, int placeholderImage) {
    Glide.with(imageView.getContext())
            .load(url)
            .apply(getDefaultGlideOptions())
            .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
            .placeholder(placeholderImage)
            .into(imageView);
}

Answer 1

Found this nice article: https://ayusch.com/databinding-with-glide-android/

We can also accept multiple arguments in our bindingadapter. For example, one may need to load an error image, or a placeholder while our image loads.

So I think listeners is the answer. Posting also the code in case the link is dead.

companion object {
        @JvmStatic
        @BindingAdapter(value = ["profileImage", "error"], requireAll = false)
        fun loadImage(view: ImageView, profileImage: String, error: Int) {
            Glide.with(view.context)
                .load(profileImage)
                .listener(object : RequestListener<Drawable> {
                    override fun onLoadFailed(
                        e: GlideException?,
                        model: Any?,
                        target: Target<Drawable>?,
                        isFirstResource: Boolean
                    ): Boolean {
                        view.setImageResource(error)
                        return true
                    }
                    override fun onResourceReady(
                        resource: Drawable?,
                        model: Any?,
                        target: Target<Drawable>?,
                        dataSource: DataSource?,
                        isFirstResource: Boolean
                    ): Boolean {
                        view.setImageDrawable(resource)
                        return true
                    }
                })
                .into(view)
        }
}

and in your layout:

app:error="@{user.errorImage}"

Answer 2

You can add multiple parameter in BindingAdapter just like this.

 @BindingAdapter("url","placeHolderImage")
  public static void loadUrlImage(ImageView view, String url, int placeHolderImage)
  {
     ImageLoaderUtil.getInstance().loadImageWithCache(view, url, placeHolderImage);
  }

And you have to add field in Imageview xml just like this.

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/vehicle_1_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/margin_twenty"
    app:layout_constraintEnd_toEndOf="@id/centerGuideline"
    app:layout_constraintStart_toStartOf="@id/centerGuideline"
    app:layout_constraintTop_toBottomOf="@id/txt_enter_vehicle_name"
    app:url="@{viewModel.imgUrl}"
    app:placeHolderImage="@{viewModel.}" 
    />

You have pass two thing xml Url and Placeholder.