Droidcon Berlin: Leveraging Android Data Binding with Kotlin

Android databinding is considered as both a powerful toolchain, empowering your views with access to view data without the necessity to build cumbersome presenters, and conversely as an overly complex, convoluted mess of binding statements opening the door to unnecessary, irresponsible domain logic in your view layouts.

Whilst the latter of these statements can be true, databinding offers a very powerful code generation syntax, allowing you to utilise the power of the compiler to ensure that your binding statements are runtime safe. Combining this with the concise syntax afforded by Kotlin allows us to dramatically cut down on boilerplate and build complex user interfaces with relative ease.

In this talk, you can learn how to utilise extension bindings and property delegates with your layouts, and manage your screen state transformations with true, and safe two-way binding, allowing you to build a fully reactive observable view layout.

Transcript

1. Leveraging Android Databinding with Kotlin ashdavies.io 1
2. What is Data Binding? ashdavies.io 2
3. Data Binding Beta 2015 ashdavies.io 3
4. Data Binding v2 ashdavies.io 4
5. Data Binding v2 Incremental class generation ⚡ ashdavies.io 5
6. Data Binding v2 Incremental class generation ⚡ Pre-compilation class generation ! ashdavies.io 6
7. Data Binding class RepoActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_repo) } } ashdavies.io 7
8. Data Binding class RepoActivity : AppCompatActivity() { private lateinit var binding: ActivityRepoBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = DataBindingUtil.setContentView(this, R.layout.activity_repo) } } ashdavies.io 8
9. Data Binding internal class RepoActivity : AppCompatActivity() { private lateinit var binding: ActivityRepoBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = DataBindingUtil.setContentView(this, R.layout.activity_repo) binding.setLifecycleOwner(this) } } ashdavies.io 9
10. Data Binding class RepoActivity : AppCompatActivity() { private lateinit var binding: ActivityRepoBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = DataBindingUtil.setContentView(this, R.layout.activity_home) binding.setLifecycleOwner(this) } } ashdavies.io 10
11. Delegated Properties ashdavies.io 11
12. Delegated Properties val value: String by lazy { println("computed!") "Hello" } ashdavies.io 12
13. Delegated Properties interface ReadOnlyProperty<in R, out T> { operator fun getValue(thisRef: R, property: KProperty<*>): T } interface ReadWriteProperty<in R, T> { operator fun getValue(thisRef: R, property: KProperty<*>): T operator fun setValue(thisRef: R, property: KProperty<*>, value: T) } ashdavies.io 13
14. Delegated Properties class ActivityBindingProperty<out T : ViewDataBinding>( ) : ReadOnlyProperty<Activity, T> { override operator fun getValue(thisRef: Activity, property: KProperty<*>): T { TODO("not implemented") } } ashdavies.io 14
15. Delegated Properties class ActivityBindingProperty<out T : ViewDataBinding>( @LayoutRes private val resId: Int ) : ReadOnlyProperty<Activity, T> { private var binding: T? = null override operator fun getValue(thisRef: Activity, property: KProperty<*>): T { return binding ?: createBinding(thisRef).also { binding = it } } private fun createBinding(activity: Activity): T { return DataBindingUtil.setContentView(activity, resId) } } ashdavies.io 15
16. ProTip: Extension Function! ! class RepoActivity : AppCompatActivity() { private val binding by activityBinding<ActivityRepoBinding>(R.layout.activity_repo) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding.setLifecycleOwner(this) } } fun <T : ViewDataBinding> FragmentActivity.activityBinding( @LayoutRes resId: Int ) = ActivityBindingProperty(resId) ashdavies.io 16
17. Introducing Android Architecture Components ashdavies.io 17
18. Model-View-ViewModel ashdavies.io 18
19. ashdavies.io 19
20. Model-View-ViewModel class RepoActivity : AppCompatActivity() { private val binding by activityBinding<ActivityRepoBinding>(R.layout.activity_repo) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding.setLifecycleOwner(this) } } ashdavies.io 20
21. Model-View-ViewModel class RepoActivity : AppCompatActivity() { private val binding by activityBinding<ActivityRepoBinding>(R.layout.activity_repo) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding.setLifecycleOwner(this) binding.model = ViewModelProviders .of(this, RepoViewModelFactory()) .get(RepoViewModel::class.java) } } ashdavies.io 21
22. ProTip: Extension Function! ! class RepoActivity : AppCompatActivity() { private val binding by activityBinding<ActivityRepoBinding>(R.layout.activity_repo) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding.setLifecycleOwner(this) binding.model = getViewModel(RepoViewModelFactory()) } } inline fun <reified T : ViewModel> FragmentActivity.getViewModel( factory: ViewModelProvider.Factory = ViewModelProvider.NewInstanceFactory() ) = ViewModelProviders.of(this, factory).get(T::class.java) ashdavies.io 22
23. Model-View-ViewModel class RepoActivity : AppCompatActivity() { private val binding by activityBinding<ActivityRepoBinding>(R.layout.activity_repo) private val model by lazy { getViewModel<RepoViewModel>(RepoViewModelFactory()) } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding.setLifecycleOwner(this) binding.model = model // val items = model.items.get() } } ashdavies.io 23
24. ViewModel class RepoViewModel(service: RepoService) : ViewModel { val items: ObservableField<List<String>> = ObservableField() fun query(value: String) { service.fetch(value, items::set) } } ashdavies.io 24
25. Observable class RepoViewModel(service: RepoService) : ViewModel { val items: ObservableField<List<String>> = ObservableField() fun query(value: String) { /* ... */ } } ashdavies.io 25
26. LiveData Data Binding ashdavies.io 26
27. LiveData Data Binding class RepoViewModel(service: RepoService) : ViewModel { val items = MutableLiveData<List<String>>() fun query(value: String) { /* ... */ } } ashdavies.io 27
28. ProTip: Extension Functions! ! class RepoViewModel(service: RepoService) : ViewModel { val items = mutableLiveData<List<String>>() fun query(value: String) { /* ... */ } } fun <T> ViewModel.mutableLiveDataOf() = MutableLiveData<T>() ashdavies.io 28
29. ViewModel class RepoViewModel(private val service: RepoService) : ViewModel { val items = mutableLiveDataOf<List<String>>() fun query(value: String) { service.fetch(value) { items.value = it } } } ashdavies.io 29
30. ViewModel class RepoViewModel(private val service: RepoService) : ViewModel { val items = mutableLiveDataOf<List<String>>() val loading = mutableLiveDataOf<Boolean>() fun query(value: String) { loading.value = true service.fetch(value) { loading.value = false items.value = it } } } ashdavies.io 30
31. Layout Expressions <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <data> <import type="android.view.View"/> <variable name="model" type="io.ashdavies.databinding.RepoViewModel"/> </data> <ProgressBar... android:visibility="@{model.loading ? View.VISIBLE : View.GONE}"/> </layout> ashdavies.io 31
32. Layout Expressions <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <data> <import type="android.view.View"/> <variable name="model" type="io.ashdavies.databinding.RepoViewModel"/> </data> <TextView... android:text="@string/activity_repo_empty"/> <ProgressBar... android:visibility="@{model.loading ? View.VISIBLE : View.GONE}"/> </layout> ashdavies.io 32
33. Layout Expressions <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <data> <import type="android.view.View"/> <variable name="model" type="io.ashdavies.databinding.RepoViewModel"/> </data> <TextView... android:text="@string/activity_repo_empty" android:visibility="@{model.items.count == 0 ? View.VISIBLE : View.GONE}"/> <ProgressBar... android:visibility="@{model.loading ? View.VISIBLE : View.GONE}"/> </layout> ashdavies.io 33
34. Layout Expressions <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <data> <import type="android.view.View"/> <variable name="model" type="io.ashdavies.databinding.RepoViewModel"/> </data> <TextView... android:text="@string/activity_repo_empty" android:visibility="@{model.items.count == 0 &amp;&amp; !model.loading ? View.VISIBLE : View.GONE}"/> <ProgressBar... android:visibility="@{model.loading ? View.VISIBLE : View.GONE}"/> </layout> ashdavies.io 34
35. Too Complicated! ashdavies.io 35
36. class RepoViewModel(private val service: RepoService) : ViewModel { val items = mutableLiveDataOf<List<String>>() val loading = mutableLiveDataOf<Boolean>() val empty = mutableLiveDataOf<Boolean>() fun query(value: String) { loading.value = true empty.value = true service.fetch(value) { items.value = it empty.value = it.isEmpty() loading.value = false } } } ashdavies.io 36
37. <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <data> <import type="android.view.View"/> <variable name="model" type="io.ashdavies.databinding.RepoViewModel"/> </data> <TextView... android:text="@string/activity_repo_empty" android:visibility="@{model.empty ? View.VISIBLE : View.GONE}"/> <ProgressBar... android:visibility="@{model.loading ? View.VISIBLE : View.GONE}"/> </layout> ashdavies.io 37
38. @BindingAdapter ashdavies.io 38
39. @BindingAdapter @BindingAdapter("goneUnless") fun goneUnless(view: View, visible: Boolean) { view.visibility = if (visible) View.VISIBLE else View.GONE } ashdavies.io 39
40. ProTip: Extension Property! ! @set:BindingAdapter("isVisible") inline var View.isVisible: Boolean get() = visibility == View.VISIBLE set(value) { visibility = if (value) View.VISIBLE else View.GONE } ashdavies.io 40
41. @BindingAdapter <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <data> <import type="android.view.View"/> <variable name="model" type="io.ashdavies.databinding.RepoViewModel"/> </data> <TextView... android:text="@string/activity_repo_empty" app:isVisible="@{model.empty}"/> <ProgressBar... app:isVisible="@{model.loading}"/> </layout> ashdavies.io 41
42. @Bindable ashdavies.io 42
43. @Bindable ObservableViewModel ashdavies.io 43
44. @Bindable PropertyChangeRegistry ashdavies.io 44
45. @Bindable abstract class ObservableViewModel : ViewModel(), Observable { private val callbacks: PropertyChangeRegistry = PropertyChangeRegistry() override fun addOnPropertyChangedCallback(callback: Observable.OnPropertyChangedCallback) { callbacks.add(callback) } override fun removeOnPropertyChangedCallback(callback: Observable.OnPropertyChangedCallback) { callbacks.remove(callback) } fun notifyChange() { callbacks.notifyCallbacks(this, 0, null) } fun notifyPropertyChanged(fieldId: Int) { callbacks.notifyCallbacks(this, fieldId, null) } } ashdavies.io 45
46. @Bindable class RepoViewModel(private val service: RepoService) : ObservableViewModel { val items = mutableLiveDataOf<List<String>>() val loading = mutableLiveDataOf<Boolean>() fun query(value: String) { loading.value = true service.fetch(value) { loading.value = false items.value = it } } } ashdavies.io 46
47. @Bindable class RepoViewModel(private val service: RepoService) : ObservableViewModel { @get:Bindable var items: List<String> = emptyList() private set(value) { notifyPropertyChanged(BR.items) field = value } val loading = mutableLiveDataOf<Boolean>() fun query(value: String) { loading.value = true service.fetch(value) { loading.value = false items = it } } } ashdavies.io 47
48. @Bindable Delegated Properties ashdavies.io 48
49. Property Delegate ObservableProperty ashdavies.io 49
50. @Bindable class BindableProperty<T>( initial: T, private val observable: ObservableViewModel, private val id: Int ) : ObservableProperty<T>(initial) { override fun beforeChange( property: KProperty<*>, oldValue: T, newValue: T ): Boolean = { /* ... */ } override fun afterChange( property: KProperty<*>, oldValue: T, newValue: T ) { /* ... */ } } ashdavies.io 50
51. @Bindable class BindableProperty<T>( initial: T, private val observable: ObservableViewModel, private val id: Int ) : ObservableProperty<T>(initial) { override fun beforeChange( property: KProperty<*>, oldValue: T, newValue: T ): Boolean = oldValue != newValue override fun afterChange( property: KProperty<*>, oldValue: T, newValue: T ) { /* ... */ } } ashdavies.io 51
52. @Bindable class BindableProperty<T>( initial: T, private val observable: ObservableViewModel, private val id: Int ) : ObservableProperty<T>(initial) { override fun beforeChange( property: KProperty<*>, oldValue: T, newValue: T ): Boolean = oldValue != newValue override fun afterChange(property: KProperty<*>, oldValue: T, newValue: T) { observable.notifyPropertyChanged(id) } } ashdavies.io 52
53. ProTip: Extension Function! ! @Bindable class RepoViewModel(private val service: RepoService) : ObservableViewModel() { @get:Bindable var items by bindable<List<String>>(emptyList(), BR.items) private set val items = mutableLifeDataOf<List<String>>() init { service.fetch(items::setValue) } } fun <T> ObservableViewModel.bindable(initial: T, id: Int): BindableProperty<T> { return BindableProperty(initial, this, id) } ashdavies.io 53
54. ! Awesome! ! ashdavies.io 54
55. Data Binding Sample github.com/ashdavies/data-binding ashdavies.io 55
56. Android Data Binding with Kotlin bit.ly/2yU8qUz ashdavies.io 56
57. Additional Resources ashdavies.io 57
58. 4 Android Data Binding Library samples Google Samples - [bit.ly/2MK5GMb] 4 Make your view-model properties great again Aiden McWilliams - [bit.ly/2llVVHz] 4 MVVM, Viewmodel and architecture components Danny Preussler - [bit.ly/2yxvGay] 4 Android Data Binding: RecyclerView George Mount - [https://bit.ly/2IgwY9w] ashdavies.io 58
59. Cheers! ! _ashdavies ashdavies.io 59