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 ProfileActivity.java 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!
