Develop apps faster using Data Binding – Part 3

3. Data Binding + Picasso

Google has been pushing updates to existing tools and making the life of android developers easier. They also have been releasing new libraries and APIs. “Data binding” is one of them. In this series, we are going to focus on some powerful features of it.

Following are our previous articles if you missed.

  • Part – 1 How to integrate Data Binding library and how to use it in layout file.
  • Part – 2 How to use Data Binding with RecyclerView.

In this tutorial, we are going to learn how to deal with Images with Data Binding.

How to use Picasso with Data Binding

Follow Step 1 and Step 2 from previous articles.

Step 3

Now open your module’s Gradle file. We require to add a some more dependencies to our project.

We added new Dependencies of Picasso and CircleImageView libraries.

I am taking an example of using Picasso, but you can use any library as per your convenience.

Step 4

Create a class called User. Paste below code inside. This will create a class with 3 members called Name, Age and Profile Image

Step 5

When dealing with third party libraries along with Data Binding, we require binding between those libraries. So we will create a class which first bind ImageView with Picasso and ImageView with Data Binding

Create a class called ImageBinder and paste below code.

Here if you noticed, we used @BindingAdapter("imageUrl"). This code tells Data Binding library that this is custom setter which you can get in layout with property tag named “imageUrl”. Lets use that imageUrl in our layout file.

While defining binding method, you can use your image loading library code. In our case, it is Picasso

Picasso.with(context).load(url).into(imageView);

Note

While using @BindingAdapter(""), you can provide name of property which you want to define in your layout file.

Step 6

Open your user_item.xml layout file.

Here, provide which property of your POJO class will be used with imageUrl. In our case it is profileImage.

Below is full source code of layout file.

Step 7

Copy UserViewHolder and UserAdapter from previous article.

Step 8

Open AndroidManifest.xml file and add Internet permission.

<uses-permission android:name="android.permission.INTERNET"/>

Step 9

Open your main activity file and add below lines of code to create list of User object and apply to adapter.

Output

Summary

In this article, we learnt how to use Data Binding library with third party image loading libraries. You can give a try to load images using different libraries.

Download

Source code for this article is available here.

You may also like to read

Using Facebook’s Shimmer effect in Android &... In this tutorial, you will learn how to implement "Shimmer effect" developed by Facebook in RecyclerView for Android. In Facebook, you see that un...
Using Facebook’s Shimmer effect in Android &... In this tutorial, you will learn about how to implement "Shimmer effect" developed by Facebook for Android. Download Source Code
Using Firebase Crash Reporting in Android Firebase is a cloud service provider which gives you the tools and infrastructure need to build better apps and grow successful businesses. There a...
Read Logs programmatically in Android In this blog you will learn how to read logs programmatically in Android and used for bug report purposes. Its easy to read logs from Logcat an...
Share on Facebook13Share on Google+2Tweet about this on TwitterShare on LinkedIn5Share on Reddit0Pin on Pinterest0Share on Tumblr0Email this to someone