How to set Image resource to ImageView using DataBinding

Question

How can we use data binding in android to put image resource in an ImageView?

  <ImageView
            android:id="@+id/is_synced"
            android:src="@{model.pending ? @mipmap/pending: @mipmap/synced}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

I want an image if pending is true and another image if pending is false. But it's showing error.How can I achieve this functionality?

I answered here a good solution. https://stackoverflow.com/a/52983092/6891563 — Khemraj Sharma, Oct 25 '18 at 06:57

Spark.Bao · Answer 1 · 2017-01-13T04:08:25.543

99

I tried this, and it works for me (buildToolsVersion: 24.0.1):

<ImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="8dp"
    android:scaleType="centerInside"
    app:imageResource="@{item.avatarResId}"/>

just use app:imageResource to replace android:src, android:src="@{item.avatarResId}" doesn't works else define a custom @BindAdapter("android:src") for it.

but use app:imageResource doesn't need define a @BindAdapter additionally, because the ImageView has a method called setImageResource(), when you use app:imageResource, it will call setImageResource() automatically.

edited Jan 13 '17 at 04:08

answered Jan 12 '17 at 10:54

Spark.Bao

5,573
2
31
36

Thank you, it works. I just replaced `android:src` with `app:imageResource`. – Waldmann Feb 22 '20 at 11:52
thanks @Spark.Bao you saved me :D it works – aida Jul 16 '20 at 19:56
If you cannot find `app:imageResource` try `app:loadImageResource` instead. – Hawklike Nov 19 '21 at 08:37
1

Remeber to add`` in xml – Zhou Hongbo Mar 28 '22 at 08:28

score 73 · Answer 2 · edited May 02 '18 at 14:15

The answer:

define:

@BindingAdapter({"android:src"})
public static void setImageViewResource(ImageView imageView, int resource) {
    imageView.setImageResource(resource);
}

use:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:scaleType="center"
    android:src="@{viewModel.imageRes, default=@drawable/guide_1}"/>

score 59 · Accepted Answer · edited Oct 08 '18 at 07:58

59

set image like this,

  <ImageView
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:src="@{model.isActive ? @drawable/white_activated_icon :@drawable/activated_icon}"
        tools:src="@mipmap/white_activated_icon" />

edited Oct 08 '18 at 07:58

Faysal Ahmed

7,501
5
28
50

answered Jun 01 '16 at 13:27

luttu android

1,443
16
22

I used it in recyclerview adapter which each item has 5 ImageView then, it causes performance decrease significantly. Because for each onBindViewHolder call, databinding check if statments. Now i prefer this [answer](https://stackoverflow.com/a/37675475/6751083) – Mohammad Reza Khahani Apr 05 '20 at 06:38
This doesn't work for me – Konstantin Konopko Dec 27 '21 at 17:12

yoAlex5 · Answer 4 · 2022-10-21T07:25:07.627

18

If you would like to pass an argument into the method like an @IdRes you can use

XML:

<?xml version="1.0" encoding="utf-8"?>
<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>
        <import type="<package_name>.R" />
    </data>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        app:load_image="@{R.drawable.image}" />
</layout>

Code

@BindingAdapter("load_image")
public static void loadImage(ImageView view, @IdRes int imageId) {
    //Logic
}

edited Oct 21 '22 at 07:25

answered Aug 28 '17 at 09:50

yoAlex5

29,217
8
193
205

I reluctantly ended up following this answer. I wish there was a way to use the `@+id/blah` syntax so that I didn't need to define a new `` resource element in a separate file... alasssssss – Eric Mar 05 '23 at 22:45

score 15 · Answer 5 · edited Nov 29 '17 at 17:09

15

You can do this without doing anything programmatically if your data model contains the resource ID of the image.

Example:

<layout>

<data>
<import type="android.support.v4.content.ContextCompat" />            
<variable
name="roomInfoItem"
type="com.example......model.RoomInfoModel" /> </data>

<RelativeLayout> 

 <ImageView
    android:id="@+id/iv_room_info_item"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
 />

</RelativeLayout>

</layout>

Just add the following line to your imageView (I wasn't able to format the code when I was adding it there):

android:src="@{ContextCompat.getDrawable(context,roomInfoItem.resId)}"

where resId contains R.drawable.your_image_name

edited Nov 29 '17 at 17:09

Derlin

9,572
2
32
53

answered Aug 28 '17 at 08:52

Rohan Taneja

9,687
3
36
48

1

This worked perfectly for me. Even when using the Groupie data binding library by Lisa Wray as well. – Patty P Oct 10 '18 at 17:43
simply working as what I expected. – Padma Kumar Jan 26 '20 at 18:13

score 5 · Answer 6 · answered Jan 05 '16 at 08:46

5

Accorrding to this great article: Loading images with Data Binding and Picasso

there are two ways to do it:

Using @BindingAdapter
ObservableField & custom Picasso Target

In Android Developers reference Data Binding Guide, you would find only the first one.

Please read both articles.

More informations:

Hope it help.

answered Jan 05 '16 at 08:46

piotrek1543

19,130
7
81
94

@piotrek1543, I am trying to load imageView using picasso in an item inside recyclerView using databainding, apparently when I scroll the up and down the images load again even if they were loaded a minute again, https://github.com/pankajnimgade/Tutorial101/tree/master/app/src/main/java/data/binding/list/activities/three – Pankaj Nimgade May 11 '16 at 05:10
good article but , if you are getting data from an external server to populate the imageUrl, by the time the data arrives loadImage(ImageView view, String imageUrl) is already called --- seems there is no 2 way binding here? – Mike6679 Jan 31 '17 at 04:01

score 1 · Answer 7 · answered Jan 05 '16 at 08:44

More details Refer here Details Loading images with data binding and Picasso

public class ProfileViewModel {
// The URL will usually come from a model (i.e Profile)
static final String IMAGE_URL = "http://cdn.meme.am/instances/60677654.jpg";
public ObservableField<Drawable> profileImage;
private BindableFieldTarget bindableFieldTarget;

public ProfileViewModel(Context context) {
    profileImage = new ObservableField<>();
    // Picasso keeps a weak reference to the target so it needs to be stored in a field
    bindableFieldTarget = new BindableFieldTarget(profileImage, context.getResources());
    Picasso.with(context)
            .load(IMAGE_URL)
            .placeholder(R.drawable.placeholder)
            .into(bindableFieldTarget);
}

public class BindableFieldTarget implements Target {

    private ObservableField<Drawable> observableField;
    private Resources resources;

    public BindableFieldTarget(ObservableField<Drawable> observableField, Resources resources) {
        this.observableField = observableField;
        this.resources = resources;
    }

    @Override
    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
        observableField.set(new BitmapDrawable(resources, bitmap));
    }

    @Override
    public void onBitmapFailed(Drawable errorDrawable) {
        observableField.set(errorDrawable);
    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {
        observableField.set(placeHolderDrawable);
    }
}
}

score 0 · Answer 8 · answered Jun 19 '17 at 20:00

The problem is with all the attributes which do on have setters with same name. e.g. android:x wont work if setX() method is not there in that view likewise if we had setSrc() method on ImageView your code would have worked without custom binding adapter

score -1 · Answer 9 · answered May 26 '17 at 18:06

-1

<ImageView ...
        app:svg="@{@drawable/ic_car_placeholder}" />

then

@BindingAdapter({"app:svg"})
public static void setImageViewResource(ImageView imageView, Drawable resource) {
    imageView.setBackgroundDrawable(resource);
}

answered May 26 '17 at 18:06

StepanM

4,222
1
21
25

How to set Image resource to ImageView using DataBinding

9 Answers9

Linked