Published in


Loading images with data binding and Picasso

Are you trying the new Android data binding library, and you don’t know how to load images into ImageViews? Here are two examples of how to get those images showing!

Recently I’ve built a MVVM app as part of Archi, a repository that showcases different architectural patterns on Android. This app had to download profile pictures from the GitHub API and display them on an ImageView via data binding. In this article, I will outline the two different solutions I found to achieve this.

The examples below use Square’s Picasso library but you could follow a similar approach with other image loading libraries.

Option 1

Using @BindingAdapter

This first solution uses the BindingAdapter annotation to create a custom xml attribute. When this attribute is set in the layout file with the right type, the data binding framework will trigger the execution of the annotated method. I called this custom attribute imageUrl and the parameter type is String. Bear in mind that the annotated method must be static.

Once your view model is ready, you can create your layout file and add the new imageUrl attribute to the ImageView. Custom attributes need to use the app namespace instead of android.

The final step is to perform the binding as you would normally do with any other data binding layout.

Option 2

ObservableField & custom Picasso Target

This second approach requires more code but it’s still as valid as the first one. The idea here is to use an ObservableField with type Drawable and a custom Picasso Target. An ObservableField wraps any type of object, in this case a Drawable, and automatically refreshes the layout when its value changes.

The magic happens when we create a custom Picasso target that takes the ObservableField and handles updating its value.

The BindableFieldTarged class needs to be written only once and can be reused across many projects.

In the layout file we have to set the src attribute of the ImageView pointing to the ObservableField.

Finally, remember to perform the binding in the same way we did before. See in example one.

And that’s it! Both solutions work quite well but I would recommend using the first one. It requires less code and it’s a bit more readable.

If you liked this, click the recommend button!




The (retired) Pub(lication) for Android & Tech, focused on Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Iván Carballo

Iván Carballo

Android developer @monzo.

More from Medium

Integration of Huawei Direction API in Navigation Glove IoT application Using Kotlin — Part 4

Android: Handle typing status in a chat app

Quick Note: Flow’s asLiveData() with CoroutineContext parameter

App Storage Options