In Open Event Orga App (Github Repo), we used Picasso to load images from URLs and display in ImageViews. Picasso is easy to use, lightweight, and extremely configurable but there has been no new release of the library since 2015. We were using Picasso in binding adapters in order to dynamically load images using POJO properties in the layout XML itself using Android Data Binding. But this configuration was a little buggy.
The first time the app was opened, Picasso fetched the image but it was not applied to the ImageView. When the device was rotated or the activity was resumed, it loaded just fine. This was a critical issue and we tried many things to fix it but none of it quite fit our needs. We considered moving on to other Image Loading libraries like Glide, etc but it was too heavy on the size and functionality for our needs. The last resort was to update the library to develop version using Sonatype’s snapshots Repository. Now, the Picasso v2.6.0-SNAPSHOT is very stable but not released to the maven central repository, and a newer develop version v3.0.0-SNAPSHOT was launched too. So we figured we should use that. This blog will outline the steps to include the develop version of Picasso, configuring it for our needs and making it work with Android Data Binding.
Setting up Dependencies
Firstly, we need to include the sonatype repository in the repositories block of our app/build.gradle
Then we need to replace the Picasso dependency entry to this:
Note that if you used Jake Wharton’s OkHttp3 Downloader for Picasso, you won’t need it now, so you need to remove it from the dependency block
And you need to use this to import the downloader
Next, we set up our Picasso DI this way
Set the singleton instance in our application:
And we are ready to use it.
Circular Image Adapter
We show event logos as circular images, so we needed to create a binding adapter for that:
If the URL is empty, we just show the default photo, and otherwise we load the image into the view using standard CircleTransform
Note that there is no context argument in the with method. This was implemented in Picasso recently where they removed the need for context for loading images. Now, they use a Dummy ContentProvider to get application context, which is inspired by how Firebase does it.
Now, we can just normally use this binding in layout to load the event thumbnail like this
This gives us a layout like this:
Next we need to load the header image with a deafult image.
Default Image Adapter
For this, we write a very simple adapter without CircleTransform
As imageUrl or placeholder can be null, we check for both, and setting correct images if they are not. We use this in our header layout with both the url and default image we need to show:
And this gives us a nice dynamic header like this:
This wraps up the blog on Picasso’s latest develop version and Binding Adapters. If you want to know more about Picasso and Android Data Binding, check these links:
- Article on custom bindings from the creator of Data Binding himself:
- Loading Images with Data Binding and Picasso:
- FutureStud.io articles on Picasso