Android

Exploring Android Data Binding Library

Source of the Image Android data binding library provide a mechanism for us to bind the data in the Android layout, and it...

Written by Vortana Say · 2 min read

Source of the Image

Android data binding library provide a mechanism for us to bind the data in the Android layout, and it allows us to remove all the boilerplate findViewById() codes as well as having to manually update those views in the code.

I created a demo application, and I would like to share my experiences with this library with you.

Gradle Configuration Set Up

To configure your app to use data binding, add the dataBinding element to your build.gradle file in the app module.

android {
    ....
    dataBinding {
        enabled = true
    }
}

Important: If you have an app module that depends on a library which uses data binding, your app module must configure data binding in its build.gradle file as well.

Also, make sure you are using a compatible version of Android Studio. Android Studio 1.3 and later provides support for data binding as described in Android Studio Support for Data Binding.

Why Android Binding Library?

Traditionally, findViewById() is used to map between the data and the views, and by using ButterKnife library, we can avoid using findViewById() and use annotation @Bind to map between the data and the views. With data binding mechanism we can get id of those boilerplate codes and our views look more clean.

Here are the actual examples from the demo app that show the differences between before and after using the library:

  • Before vs After

In the example above, I can remove all the butterknife usages and the data set up setViewData() from the DetailActivity.

  • Another example for the recycler view holder:

Before:

After:

Android Data Binding 101

The basic and straight forward usage of Data Binding Library is to provide connection between the models (POJO) and the layouts.

Here is an example of the layout, activity_detail.xml (some part only): It starts with a special tag <layout> and we declare all the variables (i.e models) that will be used to update the value of the widgets (i.e TextView); here we created a variable event that belongs to Event class.

We can access the attribute of the event using @{event.[name_attribute]}

 

Here is an example in the Detail Activity: To let the activity know about the binding, we put these codes in the onCreate().

What happen here is that we tell the targeted activity to bind the data to the layout. ActivityDetailBinding class is generated during compile time as follow:

By default, a Binding class is generated based on the name of the layout file, starting it with upper-case, removing underscores ( _ ) and capitalizing the following letter and then suffixing “Binding”. This class will be placed in a databinding package under the module package.

activity_detail.xml --> ActivityDetailBinding

We can rename Binding classes or placed in different packages by adjusting the class attribute of the data element. For example:

<data class="MyCustomItemName">
    ...
</data>

You can visit the DataBinding Library in Android developer website for further understanding:

https://developer.android.com/topic/libraries/data-binding/index.html

Data Binding and Recycler View

In the recycler view, we want to bind data to the list items and mostly set up the click listener of the items.

  • Bind data to the list items

Follow the basic implementation above (101), we could bind the value of Event model to the TextView widgets.

Now we need to set up the ImageView which use Picasso library to load the image. How can we do that? Hint: Custom Setter comes to the rescue.

We create a class call ImageBinder which has a static method called, loadImage. Notice the @BindingAdapter({“imageURL”}) usage.

In the RecyclerView Adapter:

In the layout where we set image on the CircleImageView:

  • Set up the click listener of the item

Scenario: What I want to achieve is when I click on the card item, it opens the detail screen with the animation of the CircleImageView.

I create a class called EventHandler which contains a method, onEventClicked, that the role is to start the detail activity with animation.

In the layout:

Note: These implementation should be the same for ListView and other custom List.

Bonus

If you want to concat two value strings for a TextView:
In string.xml:

<string name="locationLine" formatted="false">%s %s</string>

In layout.xml:

Visit the GitHub repository link.

Recommend and share these articles to others if you find them helpful.