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

Develop apps faster using Data Binding – Part 4 Google has been pushing updates to existing tools and making the life of android developers easier. They also have been releasing new libraries and AP...
Develop apps faster using Data Binding – Par... Google has been pushing updates to existing tools and making the life of android developers easier. They also have been releasing new libraries and AP...
Customizing TextInputLayout – Part 1 In previous article TextInputLayout – Material Design Support library Tutorial, we learn what is TextInputLayout and what is functionality of it. How ...
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...
Share on Facebook13Share on Google+2Tweet about this on TwitterShare on LinkedIn5Share on Reddit0Pin on Pinterest0Share on Tumblr0Email this to someone