Let's explore how we can use the data binding library to reduce the boilerplate code for the Android views. We'll examine how you can start creating declarative layouts to bind the application logic to your views.

1. Android Data
Binding
2

2. About Me
11
binding.setPresenter(
new Presenter(
“Ajit Singh”,
“Developer”,
“github.com/ajitsing”,
“www.singhajit.com”
)
);

3. Agenda
11
• What is Data Binding
• Why Data Binding?
• Live Coding / Demo
• Take Aways

4. 10
What data binding do? How
would it help me?

5. Whats the problem with below code
11
Task task = tasks.get(position);
TextView taskTitle = (TextView) taskView.findViewById(R.id.task_title);
TextView taskDescription = (TextView) taskView.findViewById(R.id.task_description);
TextView creationDate = (TextView) taskView.findViewById(R.id.creation_date);
TextView reminderTime = (TextView) taskView.findViewById(R.id.reminder_timer);
taskTitle.setText(task.getTitle());
taskDescription.setText(task.getDescription());
creationDate.setText(task.getCreationDate());
reminderTime.setText(task.getReminderTime());

6. Again..
11
Button addTaskButton = (Button) findViewById(R.id.add_task);
addTaskButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
presenter.onAddTask();
}
});
}

7. 10
How to eliminate this boiler plate
code??

8. Eliminate Boiler Plate Code
11
Task task = tasks.get(position);
binding.taskTitle.setText(task.getTitle());
binding.taskDescription.setText(task.getDescription());
binding.creationDate.setText(task.getCreationDate());
binding.reminderTime.setText(task.getReminderTime());

9. 10
Is it a viewHolder??

10. Eliminate Boiler Plate Code
11
<Button
android:id="@+id/add_task"
android:onClick="@{presenter.onAddTask}"
……
/>
binding.setTask(task);

11. Data Binding
11
• Developed by Google
• Built in inside gradle plugin
• No external dependency needed

12. Enable Data Binding
11
android {
……
dataBinding {
enabled = true
}
}

13. Data Binding Layout Files
11
<layout>
<data class="UserBinding">
<import type=“com.ajit.singh.demo.util.AppUtil"/>
<variable
name="viewModel"
type="com.ajit.singh.demo.viewmodel.UserViewModel"/>
</data>
<TextView
android:text=“@{viewModel.name}"
android:layout_width="wrap_content"
android:layout_height=“wrap_content"/>
</layout>

14. User Event Handling
11
<Button
android:id="@+id/add_task"
android:onClick="@{(view) -> handler.onAddTask(viewModel)}"
android:layout_width=“wrap_content"
android:layout_height="wrap_content"/>

15. Binding Expressions
11
• android:text="@{String.valueOf(index + 1)}”
• android:text="@{user.displayName ?? user.lastName}”
• android:text="@{user.displayName != null ?
user.displayName : user.lastName}"
• android:padding="@{large? @dimen/largePadding :
@dimen/smallPadding}”
• android:visibility="@{user.isAdult ? View.VISIBLE :
View.GONE}"

16. Keywords Not Supported In Binding
11
• new
• this
• super

17. Inflating Layout
11
UserBinding binding = DataBindingUtil.setContentView(this,
R.layout.user_layout);
OR
DataBindingUtil.inflate(inflator, R.layout.user_layout, parent, false);
binding.setUser(new User(“Ajit Singh”));
TextView userName = (TextView) findViewById(R.id.user_name);
userName.setText(“Ajit Singh”);

18. ViewModel
11
public class User extends BaseObservable {
@Bindable
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
notifyPropertyChanged(BR.name);
}
}

19. 10
Demo / Hands On

20. Demo App Architecture
11
Activity
Presenter/
Controller
DataBase
Layout
DataBase
execute some logic
Update UI
ReadWrite

21. Demo
11
One way binding with
static data

22. What we did?
11
• Wrap Parent ViewGroup in <layout> tag
• Move all namespaces to <layout> tag
• Define meta data of binding in <data> tag
• Inflate layout using DataBindingUtil
• set the variables defined in <data> tag in binding

23. Demo
11
Two way binding

24. What we did?
11
• Created a viewModel to hold view state
• Extend viewModel with BaseObservable
• Create setters for the fields
• Notify when data changes in viewModel
• @={viewModel.title}

25. Demo
11
Event Handling

26. Custom Binding
11
@BindingAdapter("setAdapter")
public static void setAdapter(AdapterView view, BaseAdapter adapter) {
view.setAdapter(adapter);
}
<ListView
android:id="@+id/tasks_list"
app:setAdapter="@{TasksAdapter.newInstance(viewModel.tasks)}"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

27. Take Aways…
11
• Use one way binding to update data on UI
• Two way binding to update view model from UI
• Don’t extend viewModel with BaseObservable
for static data
• Use custom binding to avoid duplication and make code
readable in layout
• Do not write too much logic in layout files

28. THANK YOU
For questions or suggestions:
Ajit Singh
ajitsing@thoughtworks.com