Android Data binding

Description: In this post I'm gonna illustrate concept of 'Data Binding' in android. So straight away.

Let's get started.

'DataBinding' in android was introduced as an effort to coupled the model i.e data directly into the view, thereby eliminating findViewById()  at much larger extend. Although its not limited to this and can help to remove lots of boilerplate code thereby. Its the direct roadway to implement MVVM pattern in our apps.

Prerequisite:

1. Add below snippets into your 'Module' build.gradle within 'android' section

    dataBinding {
        enabled true
       }

2. Now just add below line within the your 'Project'  build.gradle within 'dependencies' section.
Note: The gradle plugin should be greater or equals v1.5 +

 classpath 'com.android.tools.build:gradle:1.5.0 

Let's start with simple example of how to eliminate findViewById in activity.

1. Eliminate findViewById();

Step 1: Simply create a model with a field name as 'title' and also the POJO for the same.

public class SingleModel {

    private String title;

    public SingleModel() {
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }
}

Step 2: In our activity_main.xml wrap your parent layout within '<layout> ...< /layout>' . As shown below. Create a <data> ...</data> tag with <variable>...</variable> to access its model variables

   <layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <variable
            name="single"
            type="com.code2concept.databinding.models.SingleModel"/>
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@{single.getTitle()}"/>
    </RelativeLayout>
</layout>

Note: 1. Once you have created a variable into <layout> apt builds the binding file name BR.java(similar concept what R.java does) which and other binding functions.

Step 3: Lets integrate in our MainActivity. 

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding mainActivity = DataBindingUtil.setContentView(this, R.layout.activity_main);

        SingleModel singleModel = new SingleModel();
        singleModel.setTitle("Wow ! Data binding is awesome");
        mainActivity.setVariable(BR.single, singleModel);

    }
}

Bingo ! we have integrated databinding in our app

2. Handle click.

Step 1: Create a <variable> ... </variable> tag with name and type as shown below.

Note: Type can be created from separate class as well. We're gonna implement onClick in Activity.

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="single"
            type="com.code2concept.databinding.models.SingleModel"/>

        <variable
            name="singleClick"
            type="com.code2concept.databinding.MainActivity"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:onClick="@{singleClick.onClick}"
            android:text="@{single.getTitle()}"/>
    </RelativeLayout>
</layout>

    

Step 2: Finally bind the singleClick to the activity as shown below.

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding mainActivity = DataBindingUtil.setContentView(this, R.layout.activity_main);

        SingleModel singleModel = new SingleModel();
        singleModel.setTitle("Wow ! Data binding is awesome");
        mainActivity.setVariable(com.code2concept.databinding.BR.single, singleModel);

        //bind click to the  activity
        mainActivity.setSingleClick(this);
    }

    @Override
    public void onClick(View view) {
        Toast.makeText(this, "Single Model view is clicked", Toast.LENGTH_SHORT).show();
    }
}

Great, we have handled onClick event as well

Question: what happens when the content of the view need to be changed in the runtime?.
No need to worry 'DataBinding' helps us effortlessly.

3. NotifyChangeProperty

Step1: Add @Bindable annotation to the getters and notifyPropertyChanged() to the setters as shown below.

public class SingleModel extends BaseObservable {

    private String title;


    @Bindable
    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
        notifyPropertyChanged(BR.title);
    }
}

Step 2: Finally lets change our title on onClick. fig.1

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private SingleModel singleModel;
    private ActivityMainBinding mainActivity;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mainActivity = DataBindingUtil.setContentView(this, R.layout.activity_main);

        singleModel = new SingleModel();
        singleModel.setTitle("Wow ! Data binding is awesome");
        mainActivity.setVariable(BR.singleModel, singleModel);

        //bind click to the  activity
        mainActivity.setSingleClick(this);
    }

    @Override
    public void onClick(View view) {
        singleModel.setTitle("Title is changes successfully");
    }
}

fig.1

Awesome, finally we have integrated databinding in our project ;-). Part 2 coming soon

Read More