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;
  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. }
  11. public String getName() {
  12. return name;
  13. }
  15. public void setName(String name) {
  16. this.name = name;
  17. }
  19. public String getDesignation() {
  20. return designation;
  21. }
  23. public void setDesignation(String designation) {
  24. this.designation = designation;
  25. }
  27. public String getImage_url() {
  28. return image_url;
  29. }
  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">
  5. <data>
  7. <variable
  8. name="person"
  9. type="<package name>.PersonModelClass"></variable>
  10. </data>
  12. <LinearLayout
  13. android:layout_width="match_parent"
  14. android:layout_height="match_parent"
  15. android:gravity="center"
  16. android:orientation="horizontal">
  18. <ImageView
  19. android:layout_width="wrap_content"
  20. android:layout_height="wrap_content"
  21. app:image_url="@{person.image_url}" />
  23. <LinearLayout
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:layout_marginLeft="10dp"
  27. android:orientation="vertical">
  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" />
  35. <TextView
  36. android:layout_width="wrap_content"
  37. android:layout_height="wrap_content"
  38. android:text="@{person.designation}" />
  40. </LinearLayout>
  41. </LinearLayout>
  42. </layout>

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

  1. public class MainActivity extends AppCompatActivity {
  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. }