Load image with data binding

Question

I would like to set the image using the Android Data Binding. I have read a lot of tutorials about this and the images still don't appear.

Inside my model I have the following method:

@BindingAdapter({"app:imageUrl"})
    public static void loadImage(ImageView view, String url) {

        Log.i("III", "Image - " + url);
        Context context = view.getContext();
        Glide.with(context).load(GlobalValues.img_start_url + url).into(view);
    }

I also should mention that "III", "Image - " + url is never print so the problem is not with the Glide.

This is my xml:

 <data>

    <variable
        name="feeling"
        type="bg.web3.helpkarma.ViewModels.Feeling"/>

</data>

<ImageView
            android:layout_width="wrap_content"
            android:id="@+id/icon"
            android:layout_height="wrap_content"
            android:layout_marginRight="16dp"
            app:imageUrl="@{feeling.maleIcon}"/>

and the maleIcon is a url String

@SerializedName("male_icon")
@Expose
private String maleIcon;

you need to use `@BindingAdapter({"bind:imageUrl"})` or `@BindingAdapter({"app:imageUrl"})`, [here](http://www.androidgig.com/image-loading-with-databinding-in-android/) is small tutorial, check it — Ravi, Nov 07 '16 at 12:43
Strange error. I can't see why it doesn't work. In response to @RaviRupareliya, you'll get an extra warning if you provide the namespace in the argument to BindingAdapter. It should read @BindingAdapter("imageUrl"). — George Mount, Nov 07 '16 at 18:24
@GeorgeMount ok got it, but if we are having multiple arguments is it required to provide namespace? — Ravi, Nov 08 '16 at 04:38
Could you maybe add the code for your model and view model? Also it might be interesting to have a look at the binding of your image view. — tynn, Nov 08 '16 at 10:12
@RaviRapureliya no, multiple arguments don't require the namespace. Only two namespaces are recognized, application namespace and android namespace. — George Mount, Dec 05 '16 at 22:58
Possible duplicate of [Set drawable resource ID in android:src for ImageView using data binding in Android](https://stackoverflow.com/questions/35809290/set-drawable-resource-id-in-androidsrc-for-imageview-using-data-binding-in-andr) — Khemraj Sharma, Oct 25 '18 at 06:58

score 2 · Answer 1 · answered Jul 19 '18 at 11:24

Here are the steps: 1. Declare this method in model class, in annotation @BindAdapter("{bind:should be same variable here in which we are getting imageurl"})

  @BindingAdapter({"bind:imageUrl"})
public static void loadImage(ImageView view, String imageUrl) {
    Picasso.with(view.getContext())
            .load(imageUrl)
            .placeholder(R.drawable.placeholder)
            .into(view);}

2.Go to xml file of adapter and add app:imageUrl="@{user.imageUrl}". In this line both property app:imageurl and user.imageUrl should be same parameter in which we are getting the url of image in bean class. also we have defined the same infirst step.

 <ImageView
            android:id="@+id/restaurantIV"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:scaleType="fitXY"
            app:image="@{user.image}"
            tools:ignore="ContentDescription"/>

3.)Dont forget to add,Datum is name of Bean class user name of object `

    <variable
        name="user"
        type="com.brst.cocktailclub.beans.restaurantSearch.Datum"/>
</data>`

4.) Also add , xmlns:app="http://schemas.android.com/apk/res-auto" in layout parameter.

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

5.)Remember your Bean class should extend BaseObservable.

6.)Finally set the data in adapter

 public void onBindViewHolder(@NonNull RestaurantAdapter.ViewHolder viewHolder, int i) {

    Datum datum=data.get(i);

    viewHolder.customRestaurantListBinding.setUser(datum);


}

tynn · Answer 2 · 2016-11-07T23:29:41.407

1

Android DataBinding @BindingAdapter only supports the android namespace or none. So replace the definition with

@BindingAdapter("imageUrl")
public static void loadImage(ImageView view, String url) {
    [...]
}

Additionally loadImage() will never be called if the feeling.maleIcon is null.

edited Nov 07 '16 at 23:29

answered Nov 07 '16 at 23:04

tynn

38,113
8
108
143

It doesn't work with the code you've shared. The only way it works is when @BindingAdapter("maleIcon") and the model's property have the same name. – charbinary Nov 08 '16 at 07:50

score 0 · Answer 3 · edited Jul 20 '19 at 01:06

0

In the line:

fun loadImage(layout: ConstraintLayout, url:String)

Add ? to the type of url. The result is as:

fun loadImage(layout: ConstraintLayout, url:String?)

In my case I took layout as parameter instead of image view. This should work.

edited Jul 20 '19 at 01:06

ZF007

3,708
8
29
48

answered Jul 19 '19 at 19:22

Swamynathan Bommaganti

1
1

Fra Red · Answer 4 · 2019-11-27T08:58:33.580

I was using one of the above Answers but I was getting this below error :

java.lang.IllegalArgumentException: You cannot start a load for a destroyed activity

So I am using the Application context to solve my error.

MyApplication.java is my Application class

public class MyApplication extends Application {

    private static MyApplication mContext;

    @Override
    public void onCreate() {
        super.onCreate();
        mContext = this;
    }

    public static MyApplication getContext() {
        return mContext;
    }
}

Don't forget to declare the application in your Manifests.xml file:

<application
    android:name=".MyApplication"
    android:icon="@drawable/icon"
    android:label="@string/app_name" >

Inside my model I have the following method:

@BindingAdapter(value = "imageDrawableRes")
public static void bindErrorImageView(ImageView imageView, int imageDrawableRes) {

    Glide.with(MyApplication.getContext())
        .load(imageDrawableRes)
        .diskCacheStrategy(DiskCacheStrategy.ALL)
        .centerCrop()
        .error(placeHolder)
        .placeholder(placeHolder)
        .into(imageView);

}

activity_main.xml is my Layout file

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

    <data>
        <variable
            name="alertImage"
            type="int" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp">

        <ImageView
            android:id="@+id/iv_image"
            android:layout_width="34dp"
            android:layout_height="34dp"
            imageDrawableRes="@{alertImage}"
            android:scaleType="fitXY"
            android:padding="4dp"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

MainActivity.class is my Activity class.

ActivityMainBinding binding = DataBindingUtil.inflate(inflater, R.layout.activity_main, null, false);
binding.setAlertImage(R.drawable.icn_info);

Load image with data binding

4 Answers4