Android Architecture Components : Data Binding Part 2

Hi ,

In previous post , I have explained about data binding at initial level, now going forward I am going to share the demo to bind ImageView , with the help of Data Binding.

Now firstly enable the dataBinding element in build.gradle .

Add Picasso dependency in build.gradle as well .

implementation 'com.squareup.picasso:picasso:2.5.2'

After that , create an entity class , named ProfilePicEntity :

public class ProfilePicEntity extends BaseObservable {
    String profileImage;

    public String getProfileImage() {
        return profileImage;
    }

    public void setProfileImage(String profileImage) {
        this.profileImage = profileImage;
        notifyPropertyChanged(BR.profile);
    }

    @BindingAdapter({"android:profileImage"})
    public static void loadImage(ImageView view, String imageUrl) {
        // If you consider Picasso, follow the below
        Picasso.with(view.getContext()).
                load(imageUrl).
                placeholder(R.drawable.ic_launcher_background).
                into(view);
    }

}

Here in above class , I have one variable , with its getter/setter methods and one another method to load image .This method is helpful to load image when we pass url in ImageView setProfileImage method.
 @BindingAdapter({"android:profileImage"}) -> this is used to define the attribute which is used in layout to setImage by ImageView Tag.

Now Let's move to layout named : image_view_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="com.demo.databinding.utils.Utils" />
        <import type="android.view.View"/>
        <variable
            name="profile"
            type="com.demo.databinding.model.ProfilePicEntity">              </variable>

        <variable name="handlers"
           type="com.demo.databinding.ImageViewActivity.MyHandlers"> </variable>
    </data>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="20dp">


            <ImageView
                android:id="@+id/imageView"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:layout_gravity="center_horizontal"
                android:scaleType="fitXY"
                android:profileImage="@{profile.profileImage}"
               tools:srcCompat="@tools:sample/backgrounds/scenic[3]" />

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Change Image"
                android:onClick="@{(view)->   handlers.onClickButton(imageView)}"
                android:layout_margin="10dp"/>
        </LinearLayout>


</layout>

Here in above layout , we have defined the entity class variable name as -> profile and Handler is named as -> handlers

Now I have created a java class named: ImageViewActivity.java

public class ImageViewActivity extends AppCompatActivity {

    ImageViewLayoutBinding imageViewLayoutBinding;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        imageViewLayoutBinding = DataBindingUtil.setContentView
                (this, R.layout.image_view_layout);

        ProfilePicEntity profilePicEntity = new ProfilePicEntity();
        profilePicEntity.setProfileImage("https://cdn.iconscout.com/icon/free/png-256/avatar-373-456325.png");

        imageViewLayoutBinding.setProfile(profilePicEntity);

        MyHandlers myHandlers = new MyHandlers(this);
        imageViewLayoutBinding.setHandlers(myHandlers);
    }

    public class MyHandlers{
        public MyHandlers(ImageViewActivity activity) {
        }

        public void onClickButton(ImageView view){
            Toast.makeText(getApplicationContext(),"Button is Clicked!",Toast.LENGTH_LONG).show();
            ProfilePicEntity profilePicEntity = new ProfilePicEntity();
            profilePicEntity.setProfileImage("https://www.attractivepartners.co.uk/wp-content/uploads/2017/06/profile.jpg");
            imageViewLayoutBinding.setProfile(profilePicEntity);
        }

    }

}


Above in java class , I am setting one image url at loading time and after click the button to change the image , again setting another image url on that imageView. That's it . Paste this code and run it , let me know if you face any problem . In next post I will share the data Binding in Adapters. Till then Happy Coding :)