Data Binding is the simple approach which relieves developers of repeated findViewById() calls. It is something that every developer must use if not using ButterKnife.
The Open Event Organizer Android App provides options to fill in an extensive set of details while creating an event, or any other entities. The problem at hand is that many of these options are common to many of these entities. For instance, currently the element date-time-picker and text fields are common to elements of different forms, as each one of them requires date-time checkboxes.
We need to be able to <include> a separate smaller and reusable layout file and bind event data to make the code shorter. This would help decreasing unnecessary code base and improving code readability.
We will see how using 2 way data binding and <include> tags in the small PR #929 reduced the code of 112 lines to just 9 lines:
Step 1: Configuration:
The very first step is to configure your project to enable data bindings in your
build.gradle (Module:app) file.
dataBinding should be included as follows:
| android { // Rest of gradle file… dataBinding { enabled true } // Rest of gradle file… } |
Step 2: Import and variable tags:
Data Binding uses the tag <data> to signify the data which will be referred to in lambda expressions inside the XML.
We also need to import any class, whose methods we need to use. This can be done using the <import> tag.
Finally, the <variable> tag is used to define any variables that will be referenced in the XML.
| <data> <import type=”android.view.View” /> <variable name=“date” type=”String” /> <variable name=“label” type=”String“/> </data> |
Step 3: Binding the declared variables:
Data binding recognizes methods of the type set<variable>, where <variable> is event in our case.
We need to use executePendingBindings(); so that any pending bindings are done and the UI of our app responds correctly as soon as the view data is updated.
| @Override public void showResult(Event event) { binding.setEvent(event); binding.executePendingBindings(); } |
Step 4: Using the declared variables:
Making use of the declared variables is a very simple task and is as simple as a java statement. You can do almost everything that’s possible in the java file, the only constraint being that the used variables are declared in the xml and binded appropriately.
Most of the data binding expressions use data binding to condense the expression to its smallest possible form.
| <LinearLayout android:layout_width=“match_parent” android:layout_height=“wrap_content” android:padding=“@dimen/spacing_extra_small” android:orientation=“horizontal” android:visibility=“@{ picker.checked ? View.VISIBLE : View.GONE }”> |
2 Way Data Binding
In case of the Organizer App, we are using 2 way data binding.
Data Binding allows us to do much more than just set text in TextView or create listener in Button. If we want to use EditText and automatically update text variable in java code, we need to use observable fields and two way binding.
Thus, most variables like date, event that we are binding, are Observable fields.
* Sometimes there’s a use case of using a variable declared in another layout file.
For example, in:
| <org.fossasia.openevent.app.ui.views.DatePicker style=“?attr/borderlessButtonStyle” android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:textColor=“@color/purple_500” app:value=“@={ date }” /> |
The variable date isn’t binded in the java file but the xml files which include the layout time_picker.xml
Using the <include> tag:
The include tag is very simple to use, and we can simply bind the date and label element. The event_create_form.xml binds the variable using the bind attribute like this:
| <include layout=“@layout/time_picker” bind:date=“@={ event.startsAt }” bind:label=“@{ @string/starts_at }”/> |
The most common error you will face:
Often, when there’s something wrong with the XML, the most common error you will face is:
“Cannot resolve Data Binding class…”
This error is because Android Studio couldn’t generate the Data Binding class for your XML file because of some error. Presently, it doesn’t give much details about what’s wrong, so you’ll have to look for the errors yourselves.
The most common mistake newbie developers make is forgetting to bind the variables appropriately.
References:
Android Developer Guide: