A buttery introduction to Data Binding
If you are looking for a “Butterknife vs. Data Binding” type of article, well, that is not it. Both libraries although overlapping in certain areas, are pretty different.
This article use this overlap between both libraries in order introduce some basic Data Binding functionalities through Butterknife’s most commonly used features*.
1.Enabling Data Binding.
Enabling Data Binding is the easiest thing in the world; add the following code to the build.gradle in the App module:
2.ButterKnife.bind(this)
It’s a 2 steps process:
- Step 1: Wrap your UI with a layout tag (lowercase “l”)
Now, Android Studio will automatically generate a binding object. If your layout is named activity_main.xml, the binding will be named ActivityMainBinding.
- Step 2: DataBindingUtil.setContentView()
If you need data binding in a Fragment, ViewHolder, custom View etc… you can use DataBindingUtil.bind(View view).
3.BindView
View injection is probably THE most used feature of Butterknife. We all love the BindView(R.id.my_view) annotation. Data binding take it a step further by generating a public field for all views in the layout that have an id!!
4.OnClick
For the functionality that help remove thousands of useless line of code, both libraries diverge. Butterknife puts the responsibility of handling the event on the object that represent the view, whereas the Data Binding library puts it on the view itself. It’s more than enough for most people, however if you use the MVP pattern, you will be way too familiar with the following:
To understand how to implement the above code using data binding we need to understand the steps:
- Get data from the UI.
- Send that data to the Server.
- Do it all when the button is clicked.
4.1 Get/set data from the UI.
We will focus here on 2-way binding. The reasons behind this choice are very simple:
- Because the relationship between the layout and its handler (e.g. Activity) goes both way compared to an HTML page that is generated and all interactions are handled by other services (AJAX etc…).
- Creating a 2-way bindable model is not much more work.
To Create a 2-way model, you need to:
- Extends BaseObservable.
- Add the @Bindable annotation to the getter. This annotation will add a field in the BR class (think R for data).
- Add a call to notifyPropertyChanged in the setter.
Now, we have to let the UI knows to use our model. This is done by adding a data node in the layout XML. This node, will contain a list of variable tags. Variables to use in the layout.
Notice that the text attribute of my EditText use @={} instead of @{}. This code allow the EditText to push its text into the field of my model and vice versa.
The binding object will have a setModel(MyModel model) method.
You can now say Bye Bye to the myEditText.getEditText().toString() because all update on the layout side will update the username field and all updates to the username field in the activity will update the layout.
4.2 Handling the click business
As i said previously, the data node contains a list of variables. The beauty of those XML variables is they can be of any type. In that regard, if you have an handler class (Presenter cough cough) you can pass it to the layout the same way we passed our model and call it in android:onClick.
Conclusion
The data binding library is much more than a resource injection mechanism; it’s a complete new way we interact with the layout. We can do much more such as use custom font and i can’t wait to see what the community will do with it. You can play with a working example in the repository bellow.
*Based on my opinion.
