Implement Android Data Binding library in your android app: Part-2

In Part-1 we discussed about how to implement Android Data Binding library in your android app. In this part we will see how we can bind data within our layout xml files and also the clickListeners on buttons.

Data-binding layout files are slightly different and start with a root tag of layout followed by a data element and a view root element. This view element is what your root would be in a non-binding layout file. A sample file looks like this:

<layout>
<data>

    <variable
        name="model"
        type="sample.android.databinding.SampleModel" />
</data>
...
</layout?

The model variable within data describes a property that may be used within this layout.

You can also import reference classes in your layout file within data tag.

<import type="android.view.View"/>

Important, if you are implementing Android Data Binding library with fragments so you have to import Fragment class in your fragment’s layout file.

<import type="android.support.v4.app.Fragment"/>

Here is the TextView to show if user is online or not. Expressions within the layout are written in the attribute properties using the “@{}” syntax.

See the code below:

<TextView
    android:id="@+id/userStatus"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginRight="10dp"
    android:background="@{model.online == true ? @color/colorAccent : @color/colorPrimary}" />

Here in the above piece of code we are setting TextView background color by checking if user isOnline or not.

Taking another example setting the username value from model(POJO class) class in the xml directly :

<TextView
   android:id="@+id/name"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_toEndOf="@id/userStatus"
   android:layout_toRightOf="@id/userStatus"
   android:text="@{model.username}"
   android:textSize="16sp" />

SampleModel.java

public class SampleModel extends BaseObservable {
    private String username, useremail;
    private boolean isOnline;

    public SampleModel(String username, String useremail, boolean online) {
        this.username = username;
        this.useremail = useremail;
        isOnline = online;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
        notifyChange();
    }

    public String getUseremail() {
        return useremail;
    }

    public void setUseremail(String useremail) {
        this.useremail = useremail;
        notifyChange();
    }

    public boolean isOnline() {
        return isOnline;
    }

    public void setOnline(boolean online) {
        isOnline = online;
        notifyChange();
    }
}

By default, a Binding class will be generated based on the name of the layout file, converting it to Pascal case and suffixing “Binding” to it.

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding activityMainBinding;
SampleModel model;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    activityMainBinding = DataBindingUtil
            .setContentView(this, R.layout.activity_main);
    model = new SampleModel("Aman", "shandilya.aman@gmail.com", true);
    activityMainBinding.setModel(model);
    activityMainBinding.setActivity(this);
}

public void onButtonClick(boolean status) {
    model.setOnline(status);
}
}

activity_main.xml

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

    <data>

        <variable
            name="model"
            type="sample.android.databinding.SampleModel" />

        <variable
            name="activity"
            type="sample.android.databinding.MainActivity" />
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp"
        tools:context="sample.android.databinding.MainActivity">

        <RelativeLayout
            android:id="@+id/top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/userStatus"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginRight="10dp"
                android:background="@{model.online == true ? @color/colorAccent : @color/colorPrimary}" />

            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toEndOf="@id/userStatus"
                android:layout_toRightOf="@id/userStatus"
                android:text="@{model.username}"
                android:textSize="16sp" />

            <TextView
                android:id="@+id/email"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/name"
                android:layout_toEndOf="@id/userStatus"
                android:layout_toRightOf="@id/userStatus"
                android:text="@{model.useremail}"
                android:textSize="16sp" />

            <TextView
                android:id="@+id/status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/email"
                android:layout_toEndOf="@id/userStatus"
                android:layout_toRightOf="@id/userStatus"
                android:text="@{model.online == true ? @string/online : @string/offline}"
                android:textSize="16sp" />
        </RelativeLayout>

        <Button
            android:id="@+id/btnOnline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/top"
            android:layout_marginTop="10dp"
            android:onClick="@{()->activity.onButtonClick(true)}"
            android:text="@string/online" />

        <Button
            android:id="@+id/btnOffline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/top"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@id/btnOnline"
            android:onClick="@{()->activity.onButtonClick(false)}"
            android:text="@string/offline" />

    </RelativeLayout>
</layout>

You can find the working sample code here.

 I would love to hear your own recommendations and experiences in the comments below. Please share your Valuable feedback.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s