Data binding in Android

Warning: as of june 2015 the Android data binding library is in beta. Some part of this article may become obsolete with time but main concept will still be valid I guess.

What is data binding?

If you have already used some modern JS frameworks such as Angular.js, Ember.js Knockout.js or Backbone.js you should already be familiar with UI data binding. Otherwise here is a short overview.

If you have a user interface showing information about an object with for example few text fields (eg: name, lastname, age..). The first long thing you have to do is in the onCreateView set the text for the differents TextView or other UI elements. With data binding you can directly link your UI element with values from your model properties. You can also let your UI directly update your UI when you modify the properties of the object.

For a brief example in AngularJS you should look this.

Installing

Just update your gradle build file with:

   dependencies {
       classpath "com.android.tools.build:gradle:1.3.0-beta1"
       classpath "com.android.databinding:dataBinder:1.0-rc0"
   }

dependencies {

classpath "com.android.tools.build:gradle:1.3.0-beta1"

classpath "com.android.databinding:dataBinder:1.0-rc0"

}

How it works?

When you design your XML layout, you have to define in the root of your layout, which model your layout will use for databinding.

<data>
    <variable name="song" type="com.example.Song"/>
</data>

<data>

</data>

After in your layout, you can access the properties of your object like this for example:

 <TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{song.title}"/>
 <TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{song.artist}"/>

<TextView android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@{song.title}"/>

<TextView android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@{song.artist}"/>

Your song object can be in two different formats, an object with the used properties set as public or an object with correct getters.

public class Song {
    
    private String title;
    private String artist;

    public String getTitle() {
        return title;
    }

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

    public String getArtist() {
        return artist;
    }

    public void setArtist(String artist) {
        this.artist = artist;
    }

}

public class Song {

private String title;

private String artist;

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

public String getArtist() {

return artist;

}

public void setArtist(String artist) {

this.artist = artist;

}

Updating the view with changed properties

Imagine if we want to update a field like the artist and we want the change to be visible on the UI. It’s pretty simple and straightforward as we use the Java Observer patern.

First you hav to exend your objec to a BaseObservable and add in the getters and setters the notifyPropertyChanged Add the Bindable property to the getters.

 public class Song extends BaseObservable {
    
    private String title;
    private String artist;

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

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

    @Bindable
    public String getArtist() {
        return artist;
    }

    public void setArtist(String artist) {
        this.artist = artist;
        notifyPropertyChanged(BR.artist);
    }

}

public class Song extends BaseObservable {

private String title;

private String artist;

@Bindable

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

notifyPropertyChanged(BR.title);

}

@Bindable

public String getArtist() {

return artist;

}

public void setArtist(String artist) {

this.artist = artist;

notifyPropertyChanged(BR.artist);

}

In order for it to work, you’ll have to generate a binding when you setup your view.

MyLayoutBinding binding = MyLayoutBinding.inflate(layoutInflater);

1	MyLayoutBinding binding = MyLayoutBinding.inflate(layoutInflater);

I guess we are all set!

Conclusion

This new Android tool seems really handy to develop apps faster and in a more reliable and maintainable way that we never add before!

Here is the official guide from android developpers!