Post
Ask Question

Image Loading with DataBinding

Step 1 - Enable DataBinding in your gradle file.

  1. android {  
  2.     ...  
  3.     ...  
  4.     dataBinding {  
  5.         enabled = true  
  6.     }  

Step 2 - Define POJO/Model class

  1. public class PersonModelClass  
  2. {  
  3.     String name,designation,image_url;  
  4.   
  5.     public PersonModelClass(String name, String designation, String image_url) {  
  6.         this.name = name;  
  7.         this.designation = designation;  
  8.         this.image_url = image_url;  
  9.     }  
  10.   
  11.     public String getName() {  
  12.         return name;  
  13.     }  
  14.   
  15.     public void setName(String name) {  
  16.         this.name = name;  
  17.     }  
  18.   
  19.     public String getDesignation() {  
  20.         return designation;  
  21.     }  
  22.   
  23.     public void setDesignation(String designation) {  
  24.         this.designation = designation;  
  25.     }  
  26.   
  27.     public String getImage_url() {  
  28.         return image_url;  
  29.     }  
  30.   
  31.     public void setImage_url(String image_url) {  
  32.         this.image_url = image_url;  
  33.     }  
  34. }  

Step 3 - Define custom binding class.

  1. public class CustomBindingAdapter  
  2. {  
  3.     @BindingAdapter({"bind:image_url"})  
  4.     public static void loadImage(ImageView imageView,String url)  
  5.     {  
  6.         Picasso.with(imageView.getContext()).load(url).resize(200,200).into(imageView);  
  7.     }  
  8. }  

Here I have used Picasso for image loading, you can replace this code with your own image loader like Glide, UniversaImageLoader etc.

Step 4 

Create layout file and add the new image_url attribute to your ImageView. Custom attributes need to use the app namespace instead of android.

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <layout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto">  
  4.   
  5.     <data>  
  6.   
  7.         <variable  
  8.             name="person"  
  9.             type="<package name>.PersonModelClass"></variable>  
  10.     </data>  
  11.   
  12.     <LinearLayout  
  13.         android:layout_width="match_parent"  
  14.         android:layout_height="match_parent"  
  15.         android:gravity="center"  
  16.         android:orientation="horizontal">  
  17.   
  18.         <ImageView  
  19.             android:layout_width="wrap_content"  
  20.             android:layout_height="wrap_content"  
  21.             app:image_url="@{person.image_url}" />  
  22.   
  23.         <LinearLayout  
  24.             android:layout_width="wrap_content"  
  25.             android:layout_height="wrap_content"  
  26.             android:layout_marginLeft="10dp"  
  27.             android:orientation="vertical">  
  28.   
  29.             <TextView  
  30.                 android:layout_width="wrap_content"  
  31.                 android:layout_height="wrap_content"  
  32.                 android:text="@{person.name}"  
  33.                 android:textAppearance="?android:attr/textAppearanceLarge" />  
  34.   
  35.             <TextView  
  36.                 android:layout_width="wrap_content"  
  37.                 android:layout_height="wrap_content"  
  38.                 android:text="@{person.designation}" />  
  39.   
  40.         </LinearLayout>  
  41.     </LinearLayout>  
  42. </layout>  

Step 5 - Finally in your activity class set view with DataBindingUtils.

  1. public class MainActivity extends AppCompatActivity {  
  2.   
  3.     @Override  
  4.     protected void onCreate(Bundle savedInstanceState) {  
  5.         super.onCreate(savedInstanceState);  
  6.         ActivityMainBinding binding= DataBindingUtil.setContentView(this,R.layout.activity_main);  
  7.         PersonModelClass model=new PersonModelClass("Ravi Rupareliya","Android Developer","<image url>");  
  8.         binding.setPerson(model);  
  9.     }  
  10. }