Android DataBinding (ViewModel, UI Modularization and Testing)

Yongjun Kim, kakaobank
@imkimkevin
Seoul
Android DataBinding
UI Modularization, ViewModel and Testing

AGENDA
Korea
● The reasons to use Data Binding
● How Data Binding works
● UI Modularization
● Unit Testing

Warming UP!
https://www.pexels.com

as Android Developer
Activity (Fragment, View)
Drawing UI
Receiving User Interactions Service Broadcast Receiver Content Provider
UI

Drawing UI
ViewModel
Repository
Presenter
And more…as API Developer
Use Case
Business
UI
Provides

APIs

Drawing UI
ViewModel
Repository
Presenter
Use Case
Business
UI
Provides

APIs
Testable Code

Drawing UI
ViewModel
Repository
Presenter
Use Case
Business
UI
Provides

APIs
Testable Code
Presenter

The reasons to use
Data Binding
Seoul

The past : Model-View-Presenter
fun setTitleText(title: String) {
titleText.text = title
}
fun setTitleVisible(visible: Boolean) {
titleText.visibility = if (visible)
View.VISIBLE else View.GONE
}
fun setButtonEnabled(enable: Boolean) {
titleText.isEnabled = enable
}
Activity Presenter
fun init() {
if (isFirstLogin) {
view.setTitleText("Welcome To DevFest 2018")
view.setTitleVisible(true)
}
}
fun validateDateOfBirth(number: String) {
view.setButtonEnabled(number.length >= 6)
}
.
.
.

The past : Model-View-Presenter
Activity Presenter
fun init() {
if (isFirstLogin) {
}
}
fun validateDateOfBirth(number: String) {
}
Giant Glue Code
if (isFirstLogin) {
}
fun setTitleText(title: String) {
titleText.text = title
}
fun setTitleVisible(visible: Boolean) {
titleText.visibility = if (visible)
View.VISIBLE else View.GONE
}
titleText.isEnabled = enable
}
.
.
.

So far, It s ok
BusinessUI
Activity
Activity
PresenterActivity
Presenter
Presenter

So far, It s ok
one to one
but testable
BusinessUI
Activity
Activity
PresenterActivity
Presenter
Presenter

So far, It s ok
one to one
but testable
non-reusable
can be solved by
- use case
- abstraction
BusinessUI
Activity
Activity
PresenterActivity
Presenter
Presenter

So far, It s ok
one to one
but testable
non-reusable
can be solved by
- use case
- abstraction
hard to maintain
BusinessUI
Activity
Activity
PresenterActivity
Presenter
Presenter
- abstraction

DataBinding
● ?
"16
https://unsplash.com

android {
. . .
dataBinding {
enabled = true
}
}
build.gradle in app module
$gradle_version = Android Plugin for Gradle 1.5.0-alpha1 and higher
android_studio_version = Android Studio 1.3 and higher
// For Kotlin
dependencies {
kapt “com.android.databinding:compiler:$gradle_version"
}

TextView
Welcome message
for Devfest Seoul of the year
Requirements
EditText
6 numbers for authentication Button
Enabled for login
with 6 numbers

override fun onCreate(savedInstanceState: Bundle?) {
...
setContentView(R.layout.activity_main)
textView.text = String.format(getString(R.string.title), presenter.year)
editText.addTextChangedListener(object : TextWatcher {
override fun beforeTextChanged(...) { }
override fun afterTextChanged(s: Editable?) {
presenter.validate(s.toString())
}
override fun onTextChanged(...) { }
})
button.setOnClickListener { }
}
button.isEnabled = enable
}
Activity

String.format(getString(R.string.title), presenter.year)
...
}
})
}
}
“Welcome to Devfest Seoul %s”
Activity

...
}
})
}
}
presenter.year
fun validate(number: String) {
view.setButtonEnabled(number.isCodeValid())
}
Activity Presenter

...
}
})
}
}
presenter.year
fun validate(number: String) {
view.setButtonEnabled(number.isCodeValid())
}
}
Activity Presenter

Activity
view xml
Presenter
Data Binding
MVP with Data Binding

...
}
})
}
}
Activity Presenterxml Data Binding

...
}
})
}
}
val binding = DataBindingUtil.setContentView<ActivityMainBinding>(
this, R.layout.activity_main)
binding.setLifecycleOwner(this) // LiveData
binding.setPresenter(presenter)

...
}
})
}
}
<layout>
<android.support.constraint.ConstraintLayout …>
<TextView
android:id=“@+id/textView" ... />
<EditText
android:id=“@+id/editText" ... />
<Button
android:id=“@+id/button" ... />
</android.support.constraint.ConstraintLayout>
</layout>
<layout>
</layout>
R.layout.activity_main

...
}
})
}
}
binding.setPresenter(presenter)binding.setPresenter(presenter)
<layout>
<data>
<variable
name=“presenter” type=“com...MainPresenter"/>
</data>
<android.support.constraint.ConstraintLayout …>
<EditText
android:id=“@+id/editText" ... />
<data>
<variable
name=“presenter” type=“com...MainPresenter"/>
</data>

delete
...
binding.setLifecycleOwner(this)
}
})
}
}

...
}
})
}
}
<TextView
<layout>
...
<android.support.constraint.ConstraintLayout ...>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=“@{@string/title(presenter.year)}” />android:text=“@{@string/title(presenter.year)}”
TextView

android:text=“@{@string/title(presenter.year)}”
Expression Language

android:text="@{String.valueOf(index + 1)}"
android:visibility="@{size < 15 ? View.GONE : View.VISIBLE}”
android:textColor=“@{colorText}” ???
Expression Language

android:textColor=“#fe3dfc”
@InverseMethod

colorText.value = "#000000"
android:textColor=“@{colorText}”
@InverseMethod

android:textColor=“@{colorText}” // ERROR!!
@InverseMethod
colorText.value = "#000000"

object Converters {
@JvmStatic
@InverseMethod(“toColor")
fun fromColorString(colorString: String): Int {
return Color.parseColor(colorString)
}
@JvmStatic // Two-way Binding
fun toColor(color: Int): String {
return color.toString()
}
}
android:textColor="@{Converters.fromColorString(colorText)}"
@InverseMethod

android:text="@{String.valueOf(index + 1)}"
android:visibility="@{size < 15 ? View.GONE : View.VISIBLE}”
android:textColor=“@{colorText}” // @InverseMethod
android:visibility=“@{title != null}” ???
Expression Language

android:visibility=“@{title != null}”
visible | invisible | gone
@BindingConversion
object Conversions {
@JvmStatic
@BindingConversion
fun convertBooleanToVisibility(visible: Boolean)
= if (visible) View.VISIBLE else View.GONE
}

Normally
1. visible | invisible ???
2. visible | gone ???

Normally
1. visible | invisible
2. visible | gone
app:visible=“@{title != null}”
app:visibleOrGone=“@{title != null}”

@BindingAdapter
@Target(ElementType.METHOD)
public @interface BindingAdapter {
String[] value();
boolean requireAll() default true;
}

@BindingAdapter
@Target(ElementType.METHOD)
public @interface BindingAdapter {
String[] value();
boolean requireAll() default true;
}
// Example
@BindingAdapter("visible")
@BindingAdapter(value={"url", "size"},
requireAll=false)

app:visible=“@{title != null}”
app:visibleOrGone=“@{title != null}”
@BindingAdapter
@JvmStatic
@BindingAdapter("visible")
fun View.setVisible(visible: Boolean) {
visibility = if (visible) View.VISIBLE else View.INVISIBLE
}
@JvmStatic
@BindingAdapter("visibleOrGone")
fun View.setVisibleOrGone(visible: Boolean) {
visibility = if (visible) View.VISIBLE else View.GONE
}

...
}
})
}
}
}
})
<layout>
...
<EditText
android:id=“@+id/editText"
android:text=“@={presenter.authCode}”android:text=“@={presenter.authCode}”
EditText
class MainPresenter {
val authCode = MutableLiveData<String>()
...
}

android:text=“@={presenter.authCode)}”
Two-way data binding

OK
presenter.authCode = null

OKOK
123456 presenter.authCode = “123456”

OK
1234
OK
presenter.authCode = “1234”

InverseBindingAdapter in ActivityMainBinding.java
@InverseBindingAdapter(attribute = "android:text",
event = "android:textAttrChanged")
public static String getTextString(TextView view) {
return view.getText().toString();
}

TextViewBindingAdapter.setTextWatcher(this.editText,
null, null, null, editTextandroidTextAttrChanged);
BindingAdapter in ActivityMainBinding.java
private InverseBindingListener editTextandroidTextAttrChanged
= new InverseBindingListener() {
@Override
public void onChange() {
String callbackArg_0 =
TextViewBindingAdapter.getTextString(editText);
...
vmAuthCode.setValue(((String) (callbackArg_0)));
}
editTextandroidTextAttrChanged

private InverseBindingListener editTextandroidTextAttrChanged
= new InverseBindingListener() {
@Override
public void onChange() {
String callbackArg_0 =
...
vmAuthCode.setValue(((String) (callbackArg_0)));
}
editTextandroidTextAttrChanged

TextViewBindingAdapter.setTextWatcher
@BindingAdapter(value = {"android:beforeTextChanged", "android:onTextChanged",
"android:afterTextChanged", "android:textAttrChanged"}, requireAll = false)
public static void setTextWatcher(TextView view, final BeforeTextChanged before,
final OnTextChanged on, final AfterTextChanged after,
final InverseBindingListener textAttrChanged) {
final TextWatcher newValue;
...
newValue = new TextWatcher() {
...
@Override
public void onTextChanged(CharSequence s, int start, int before, int count)
if (textAttrChanged != null) {
textAttrChanged.onChange();

Default BindingAdapters
android.databinding.adapters
@BindingMethods({
@BindingMethod(type = TextView.class, attribute =
"android:inputType", method = "setRawInputType"),
@BindingMethod(type = TextView.class, attribute =
"android:textAllCaps", method = “setAllCaps"),
...
})
public class TextViewBindingAdapter {
@BindingAdapter("android:text")
public static void setText(TextView view, CharSequence text) {
final CharSequence oldText = view.getText();
if (text == oldText || (text == null && oldText.length() == 0)) {
return;
}

...
}
}
}
<Button
…
android:enabled="@{ValidationUtil.isCodeValid(vm.authCode)}"
android:onClick="@{() -> vm.login()}"
<layout>
<data>
<import type=“com....ValidationUtil"/>
<variable
object ValidationUtil {
@JvmStatic
fun String?.isCodeValid() = this?.length ?: 0 >= 6
}

class MainActivity : AppCompatActivity() {
super.onCreate(savedInstanceState)
}
}
Activity

Activity xml
<layout>
<data>
<variable name=“presenter” type=“com...MainPresenter"/>
</data>
<TextView
android:text=“@{@string/title(presenter.year)}” .../>
<EditText
android:text=“@={presenter.authCode}” .../>
<Button
android:enabled=“@{ValidationUtil.isCodeValid(presenter.authCode)}”
android:onClick="@{() -> presenter.login()}” .../>
</layout>

class MainPresenter {
var year : String
init {
year = "2018"
}
fun login() {
// do something!
}
}

Activity
view xml
Presenter
Data Binding
AS-IS : MVP with Data Binding

class MainViewModel {
var year : String
init {
year = "2018"
}
fun login() {
// do something!
}
}
Activity ViewModelxml Data Binding

TO-BE : MVVM with Data Binding
Activity
view xml
ViewModel
Data Binding

OK
...
<EditText
android:id=“@+id/editText“
android:text=“@={vm.authCode}” .../>
<Button
android:id=“@+id/button“

OK
OK
123456
...
<EditText
<Button

OK
OK
123456
...
<EditText
<Button
How this works in generated class?

OK
OK
123456
...
<EditText
<Button
DirtyFlag

activity_main.xml
<layout>
<data>
<variable name=“vm” type=“com...MainViewModel"/>
</data>
<TextView
android:text=“@{@string/title(vm.year)}” .../>
<EditText
<Button
android:enabled=“@{ValidationUtil.isCodeValid(vm.authCode)}”
android:onClick="@{() -> vm.login()}” .../>
</layout>

activity_main.xml Layout Processor
<layout>
<data>
<variable name=“vm” type=“com...MainViewModel"/>
</data>
<TextView
android:text=“@{@string/title(vm.year)}” .../>
<EditText
<Button
android:onClick="@{() -> vm.login()}” .../>
</layout>

ActivityMainBinding.java Layout Processor
public class ActivityMainTestBinding extends android.databinding.ViewDataBinding implements
android.databinding.generated.callback.OnClickListener.Listener {
...
@NonNull
public final android.widget.Button button;
@NonNull
public final android.widget.EditText editText;
@NonNull
public final android.widget.TextView textView;
@NonNull
private final android.support.constraint.ConstraintLayout mboundView0;
@Nullable
private com.github.kimkevin.devfestseoul18.MainViewModel mVm;
@Nullable
private final android.view.View.OnClickListener mCallback1;
Variable
Listener
View
@NonNull
public final android.widget.Button button;
@NonNull
public final android.widget.EditText editText;
@NonNull
public final android.widget.TextView textView;
@Nullable
private com.github.kimkevin.devfestseoul18.MainViewModel mVm;
@Nullable
private final android.view.View.OnClickListener mCallback1;
ActivityMainTestBinding android.databinding.ViewDataBinding

DirtyFlag mapping
Dealing with updates
When data is changed, mDirtyFlags is updated
0 0 1
0 1 0
1 0 0
0x1L
0x2L
0x4L
/* flag mapping
flag 0 : vm.authCode
flag 1 : vm
flag 2 : null
flag mapping end*/
ActivityMainBinding.java

DirtyFlag mapping
Dealing with updates
When data is changed, mDirtyFlags is updated
0 0 1
0 1 0
1 0 0
0x1L
0x2L
0x4L
/* flag mapping
flag 0 : vm.authCode
flag 1 : vm
flag 2 : initialized
flag mapping end*/

/* flag mapping
vm.authCode : 0x1L
vm : 0x2L
initialized : 0x4L
flag mapping end*/
private boolean onChangeVmAuthCode(MutableLiveData<String> VmAuthCode,
int fieldId) {
if (fieldId == BR._all) {
synchronized(this) {
mDirtyFlags |= 0x1L;
}
return true;
}
return false;
mDirtyFlag
vm.authCode : 0x1L

/* flag mapping
vm.authCode : 0x1L
vm : 0x2L
initialized : 0x4L
flag mapping end*/
mDirtyFlag
vm : 0x2L
public void setVm(@Nullable com...MainViewModel Vm) {
this.mVm = Vm;
mDirtyFlags |= 0x2L;
}
notifyPropertyChanged(BR.vm);
super.requestRebind();
}

/* flag mapping
vm.authCode : 0x1L
vm : 0x2L
initialized : 0x4L
flag mapping end*/
mDirtyFlag
@Override
public void invalidateAll() {
mDirtyFlags = 0x4L;
}
requestRebind();
}
initialized : 0x4L

flag initialized : 0x4L
val vm = MainViewModel()
binding.setVm(viewModel)
}
}
mDirtyFlags = 0x4L

flag vm : 0x2L
val vm = MainViewModel()
binding.setVm(viewModel)
}
}
mDirtyFlags = 0x4L | 0x2L = 0x6L

@Override
protected void executeBindings() {
...
dirtyFlags = mDirtyFlags;
if ((dirtyFlags & 0x7L) != 0) {
textViewAndroidStringTitleVmYear = textView...getString(R.string.title, vmYear);
}
// read vm.authCode.getValue()
vmAuthCodeGetValue = vmAuthCode.getValue();
// read ValidationUtil.isCodeValid(vm.authCode.getValue())
vmAuthCodeLengthInt6 = ValidationUtil.isCodeValid(vmAuthCodeLength);
}
this.button.setEnabled(vmAuthCodeLengthInt6);
TextViewBindingAdapter.setText(this.editText, vmAuthCodeGetValue);
}
this.button.setOnClickListener(mCallback1);
TextViewBindingAdapter.setTextWatcher(this.editText, null, null, null,
editTextandroidTextAttrChanged);
}
TextViewBindingAdapter.setText(this.textView, textViewAndroidStringTitleVmYear);
}
}
mDirtyFlags = 0x6L

@Override
...
if ((0x6L & 0x7L) != 0) {
if ((0x6L & 0x6L) != 0) {
}
}
if ((0x6L & 0x7L) != 0) {
}
if ((0x6L & 0x4L) != 0) {
}
if ((0x6L & 0x6L) != 0) {
}
}
mDirtyFlags = 0x6L

@Override
...
if ((0x6L & 0x7L) != 0) {
if ((0x4L & 0x6L) != 0) {
}
}
if ((0x4L & 0x7L) != 0) {
}
if ((0x4L & 0x4L) != 0) {
}
if ((0x4L & 0x6L) != 0) {
}
}
mDirtyFlags = 0x4L
1 1 0
1 1 1
0x6L
0x7L
(0x6L & 0x7L) != 0
&

@Override
...
if ((0x6L & 0x7L) != 0) {
if ((0x4L & 0x6L) != 0) {
}
}
if ((0x4L & 0x7L) != 0) {
}
if ((0x4L & 0x4L) != 0) {
}
if ((0x4L & 0x6L) != 0) {
}
}
(0x6L & 0x7L) != 0
mDirtyFlags = 0x4L
1 1 1
0
0x6L
0x7L
&
1 1 0

@Override
...
if ((0x6L & 0x7L) != 0) {
if ((0x4L & 0x6L) != 0) {
}
}
if ((0x4L & 0x7L) != 0) {
}
if ((0x4L & 0x4L) != 0) {
}
if ((0x4L & 0x6L) != 0) {
}
}
(0x6L & 0x7L) != 0
mDirtyFlags = 0x4L
1 1 1
1 1 0
0x7L
0x6L
&
0x6L 1 1 0

@Override
...
if ((0x6L & 0x7L) != 0) {
if ((0x4L & 0x6L) != 0) {
}
}
if ((0x4L & 0x7L) != 0) {
}
if ((0x4L & 0x4L) != 0) {
}
if ((0x4L & 0x6L) != 0) {
}
}
(0x6L & 0x7L) != 0
mDirtyFlags = 0x4L
1 1 1
1 1 0
0x7L
0x6L
&
0x6L 1 1 0
!= 0 true

@Override
...
if (true) {
if (true) {
}
}
if (true) {
}
if (true) {
}
if (true) {
}
}
mDirtyFlags = 0x6L

Binding
- Initialized
- set Variables
OK

1
OK
flag vm.authCode : 0x1L
Input 1

1
OK
flag vm.authCode : 0x1L
mDirtyFlags = 0x1L

@Override
...
if ((0x1L & 0x7L) != 0) {
if ((0x1L & 0x6L) != 0) {
}
}
if ((0x1L & 0x7L) != 0) {
}
if ((0x1L & 0x4L) != 0) {
}
if ((0x1L & 0x6L) != 0) {
}
}
mDirtyFlags = 0x1L

@Override
...
if (true) {
if (false) {
}
}
if (true) {
}
if (false) {
}
if (false) {
}
}
mDirtyFlags = 0x1L
@Override
...
if (true) {
if (false) {
}
}
if (true) {
}
if (false) {
}
if (false) {
}
}

"95
Includes data class SpeakerSchedule(val name: String, val subject: String)
<layout>
<data>
<variable
name="schedule"
type=“com...SpeakerSchedule” />
</data>
<TextView
android:id="@+id/subjectTextView"
android:text=“@{schedule.subject}"/>
<TextView
android:id="@+id/nameTextView"
android:text=“@{schedule.name}" />
...
</layout>
item_schedule.xml

"96
Includes
<layout>
<data>
<variable name="schedule"
type="com...SpeakerSchedule" />
</data>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
...
<include
android:layout=“@layout/item_schedule”
app:schedule=“@{schedule}” />
...
</layout>
<include
app:schedule=“@{schedule}” />
type="com...SpeakerSchedule" />

Includes
binding.schedule = SpeakerSchedule(“KimKevin”, “Android...”)
<include
app:schedule=“@{schedule}” .../>
type=“com.github.kimkevin…SpeakerSchedule" />

Listing & BindingAdapter
@BindingAdapter("schedules")
fun setSchedules(container: LinearLayout,
schedules: List<SpeakerSchedule>) {
container.removeAllViews()
val inflater = container.context.getSystemService(
Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
schedules.forEach {
val binding = DataBindingUtil.inflate<ItemScheduleBinding>(
inflater, R.layout.item_schedule, container, true)
binding.schedule = it
}
}

Listing & BindingAdapter
<LinearLayout
android:orientation="vertical"
app:schedules="@{schedules}" .../>
<variable name="schedules"
type="List<SpeakerSchedule>" />
val schedules = mutableListOf<SpeakerSchedule>().apply {
add(SpeakerSchedule("Kevin", "Android"))
add(SpeakerSchedule("David", “Data Binding”))
}
binding.schedule = schedules

Listing & ViewHolder
ItemViewHolder
class ItemViewHolder(v: View) : RecyclerView.ViewHolder

HeaderViewHolder
ItemViewHolder
class HeaderViewHolder(v: View) : RecyclerView.ViewHolder

HeaderViewHolder
ItemViewHolder
ProgressViewHolder
class HeaderViewHolder(v: View) : RecyclerView.ViewHolder
class ProgressViewHolder(v: View) : RecyclerView.ViewHolder

class BindingViewHolder<T: ViewDataBinding>
constructor(val binding: T): RecyclerView.ViewHolder(binding.root)

class BindingViewHolder<T: ViewDataBinding>
constructor(val binding: T): RecyclerView.ViewHolder(binding.root)
override fun onCreateViewHolder(parent: ViewGroup, position: Int):
BindingViewHolder<ViewDataBinding> {
return BindingViewHolder(ItemScheduleBinding.inflate(
LayoutInflater.from(parent.context), parent, false))
}
override fun onBindViewHolder(
viewHolder: BindingViewHolder<ViewDataBinding>, position: Int) {
val binding = viewHolder.binding as ItemScheduleBinding
binding.schedule = items.get(position)
}
Adapter

TextView
Welcome message
for Devfest Seoul of the year
Requirements
EditText
6 numbers for authentication Button
Enabled for login
with 6 numbers
Business
UI

???
<TextView
.../>
Business
UI

???
<TextView
.../>
Business
UI
vm.year

<TextView
.../>
Business
UI
@Test
fun initVm_setYear() {
vm = MainViewModel()
assertTrue(vm.year, deafest.year)
}
val devfest = repository.getDevfest()
vm.year = devfest.year
MainViewModel

Business
UI
<Button
.../>

???
<Button
.../>
Business
UI

vm.authCode >= 6
<Button
.../>
Business
UI

fun String?.isCodeValid()
= this?.length ?: 0 >= 6
<Button
.../>
Business
UI

<Button
.../>
@Test
fun validateLessThan6Numbers() {
assertFalse(“1234".isCodeValid())
}
Business
UI

<Button
.../>
@Test
fun validate6Numbers() {
assertTrue("123456".isCodeValid())
}
Business
UI

Seoul
Thank you
Yongjun Kim, kakaobank
@imkimkevin

Q&A
imkimkevin@gmail.com
https://www.facebook.com/imkimkevin
Busan

Android DataBinding (ViewModel, UI Modularization and Testing)

More Related Content

Similar to Android DataBinding (ViewModel, UI Modularization and Testing)

More from Yongjun Kim

Recently uploaded

Android DataBinding (ViewModel, UI Modularization and Testing)