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 thedata
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: