Android Data Binding: from (null) to (data)

Android Data Binding library is Google's take on improving the messy, boilerplate riddled layout inflation code that is so common on many Android codebases. This talk will show you how we will be able to use declarative bindings to make populating layouts with data a breeze, and allow data to flow back by using two-way bindings, making UI code more DRY. Also, we will see how to convert old projects incrementally, and the benefits over other libraries like ButterKnife.

https://xrubio.com/talks/talk-android-data-binding-from-null-to-data/

Transcript

1. A D B ( ) ( ) Xavier Rubio Jansana  @teknik_tdr  https://xrubio.com  https://github.com/xrubioj/
2. W ? Standalone library (no additional dependencies) Compatible with API 7+ (Android 2.1) Announced by Google at I/O 2015 Integrated into Android Studio & Gradle Requires changes to the layouts... simple ones ...but can coexist with old methods → progressive
3. W ? Declarative layouts Minimize code to bind data to layouts Cleaner separation Allows observables (reactive)
4. H ? In app Gradle file: ...if you use Kotlin also add: android { ... dataBinding { enabled = true } } apply plugin: 'kotlin-kapt' ... dependencies { ... kapt "com.android.databinding:compiler:2.3.0" }
5. L <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"> <data> <variable name="model" type="com.xrubio.databindingexample.model.PojoActivityModel"/> <variable ... /> </data> <!-- Your regular layout here --> </layout>
6. L <TextView android:id="@+id/message" android:text="@{model.message}" tools:text="message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginEnd="16dp" android:layout_marginStart="16dp" android:layout_marginTop="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> android:id="@+id/message"
7. A class PojoModelActivity : AppCompatActivity() { lateinit var binding: ActivityPojoModelBinding // activity_pojo_model lateinit var model: PojoModel override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = DataBindingUtil.setContentView( this, R.layout.activity_pojo_model) model = PojoModel(message = "Hello World!") binding.model = model } } ActivityPojoModel
8. M
9. M Can be as simple as a POJO or data class If you try to update this model UI will not update: To update we need to replace the whole model: data class PojoModel(var message: String) binding.model.message = "You will never see this" binding.model = PojoModel("But you will see this")
10. M More complex like an Observable You can update individual fields: class ObservableModel() : BaseObservable() { @get:Bindable var message: String? = null set(message) { field = message notifyPropertyChanged(BR.message) } } @get:Bindable notifyPropertyChanged binding.model.message = "You should see this"
11. M Middle ground... ObservableFields You can update individual fields: class ObservableFieldModel() { val message: ObservableField<String> = ObservableField() val visible: ObservableBoolean = ObservableBoolean() constructor(message: String) : this() { this.message.set(message) } } binding.model.message.set("You should see this") set
12. B
13. B Bind variables: in/out Bind views: access views directly Examples var binding: ActivityPojoModelBinding binding.model = PojoModel("Hi!") // <variable ...> binding.text.alpha = 0.5f // <TextView android:id="@+id/text" ...>
14. B Bind activity layout Bind general layouts val binding: ActivityPojoModelBinding = DataBindingUtil.setContentView( this, R.layout.activity_pojo_model) // or... val binding: ActivityPojoModelBinding = ActivityPojoModelBinding.inflate(layoutInflater) setContentView(binding.root) var binding: ListItemBinding = DataBindingUtil.inflate(layoutInflater, R.layout.list_item, viewGroup, false) // or... var binding: ListItemBinding = ListItemBinding.inflate(layoutInflater, viewGroup, false) // ...and finally retrive layout root View binding.root
15. V Expressions are not simple references For example, we can set visibility like this: Null coalescing operator: Null pointer handling: if model is null android:visibility="@{model.visible ? View.VISIBLE : View.GONE}" android:text='@{"This is the message: " + model.message}' android:text='@{model.message ?? "(no message)"}' // equivalent to Elvis operator ?: android:text='@{model.message}' // no crash, evaluates to "(null)" android:visibility="@{model.visible ? View.VISIBLE : View.GONE}" // false => GONE
16. O Java-like expressions: Mathematical + - / * % String concatenation + Logical && || Binary & | ^ Unary + - ! ~ Shi >> >>> << Comparison == > < >= <= instanceof Grouping () Literals - character, String, numeric, null Cast Method calls Field access Array access [] → Collections android:text="@{list[index]}" Ternary operator ?: Method calls
17. S android:text='@{map["firstName"]}' android:text="@{map[`firstName`}" android:text="@{map['firstName']}"
18. T
19. T Allows the binding to update the model For example: Needs a setter on the POJO/data class or Observable Model ⚠ ObservableField doesn't work here (weird compilation error ) <EditText android:text="@={model.value}"/> =
20. C Allows the binding to convert and format data Simplified conversion ("hackish") <data> <variable name="model" type="com.xrubio.databindingexample.model.TwoWayDataBin </data> <!-- Layout ... --> <EditText android:text="@={`` + model.value}"/> ``
21. C Using converters functions <data> <import type="com.xrubio.databindingexample.converters.IntConverter"/> <variable name="model" type="com.xrubio.databindingexample.model.TwoWayDataBindingConversionModel"/> </data> <!-- Layout ... --> <EditText android:text="@={IntConverter.INSTANCE.toString(model.value)}"/> IntConverter.INSTANCE.toString object IntConverter { @InverseMethod("toInt") fun toString(value: Int): String { return if (value >= 0) value.toString() else "" } fun toInt(value: String): Int { return try { Integer.parseInt(value) } catch (e: NumberFormatException) { -1 } } } @InverseMethod("toInt")
22. E
23. E Method References → Evaluated at compile time <data> <variable name="view" type="com.xrubio.databindingexample.ui.MainActivity"/> </data> <!-- Layout ... --> <Button android:text="Button" android:onClick="@{view::onClickButton}"/> fun onClickButton(view: View) { // ... }
24. E Listener Bindings → Evaluated at run time <data> <variable name="view" type="com.xrubio.databindingexample.ui.MainActivity"/> <variable name="data" type="com.xrubio.databindingexample.ui.ItemData"/> </data> <!-- Layout ... --> <Button android:text="Button" android:onClick="@{(btn) -> view.onClickButton(btn, data)}"/> fun onClickButton(btn: View, data: ItemData) { // ... }
25. C
26. C Creation of the layout Doesn't find new binding on first usage → Build→Clean Project
27. C Annotation processor errors and kapt Not very useful → Check Gradle Console
28. C Error messages in Gradle Console lines are off-by-1 It is really line 47, column 30 e: java.lang.IllegalStateException: failed to analyze: java.lang.RuntimeException: Found data binding errors. ****/ data binding error ****msg:Cannot resolve type for IntConverter file:/Users/teknik/Documents/source/ _talks/android-data-binding-talk/databinding-example/app/src/main/res/layout/ activity_two_way_binding_conversion_converter.xml loc:46:29 - 46:62 ****\ data binding error **** 46:29
29. R Google's Data Binding Library George Mount Medium articles Android Data Binding In Practice https://developer.android.com/topic/libraries/data- binding/index.html https://medium.com/@georgemount007 https://truveris.github.io/articles/android- advanced-data-binding/
30. Q ?
31. T ! Xavier Rubio Jansana This talk is available at:  @teknik_tdr  https://xrubio.com  https://github.com/xrubioj/ https://xrubio.com/talks/talk-android-data-binding-from-null-to-data/