Functional MVVM using RxJava and Data Binding Manas Chaudhari 

User interfaces • Lot of changing states • Data from server • Change on user action 

Login Example 

Login Example Validations 

Login Example Validations 

Static World 
 String email = emailEditText.getText(); String phone = phoneEditText.getText();
 
 // Intermediate
 boolean emailValid = FormUtils.checkEmail(email);
 boolean phoneValid = FormUtils.checkPhone(phone);
 
 // Outputs
 String emailError = emailValid ? null : "Invalid Email";
 String phoneError = phoneValid ? null : "Invalid Phone";
 boolean loginEnabled = emailValid && phoneValid;
 Real code isn’t so simple. Why? 

Need Listeners String email = emailEditText.getText(); 

Need Listeners emailEditText.addTextChangedListener(new TextWatcher() {
 @Override
 public void beforeTextChanged(...) {}
 
 @Override
 public void onTextChanged(...) {}
 
 @Override
 public void afterTextChanged(Editable s) {
 checkEmail(s.toString());
 }
 }); void checkEmail(String email) {
 // Further calculations
 } 

void checkEmail(String email) {
 boolean emailValid = FormUtils.checkEmail(email);
 String emailError = emailValid ? null : "Invalid Email";
 emailEditText.setError(emailError);
 } 

void checkEmail(String email) {
 boolean emailValid = FormUtils.checkEmail(email);
 String emailError = emailValid ? null : "Invalid Email";
 emailEditText.setError(emailError);
 } phoneEditText.addTextChangedListener(...)
 
 void checkPhone(String phone) {
 boolean phoneValid = FormUtils.checkPhone(phone);
 String phoneError = phoneValid ? null : "Invalid phone";
 phoneEditText.setError(phoneError);
 } 


 String email = emailEditText.getText(); String phone = phoneEditText.getText();
 
 // Intermediate
 boolean emailValid = FormUtils.checkEmail(email);
 boolean phoneValid = FormUtils.checkPhone(phone);
 
 // Outputs
 String emailError = emailValid ? null : "Invalid Email";
 String phoneError = phoneValid ? null : "Invalid Phone";
 boolean loginEnabled = emailValid && phoneValid;
 

private boolean emailValid;
 private boolean phoneValid;
 
 void checkEmail(String email) {
 emailValid = FormUtils.checkEmail(email);
 String emailError = emailValid ? null : "Invalid Email";
 emailEditText.setError(emailError);
 refreshLoginEnabled();
 }
 
 void checkPhone(CharSequence phone) {
 phoneValid = FormUtils.checkPhone(phone.toString());
 String phoneError = phoneValid ? null : "Invalid phone";
 phoneEditText.setError(phoneError);
 refreshLoginEnabled();
 }
 
 private void refreshLoginEnabled() {
 loginButton.setEnabled(phoneValid && emailValid);
 } 

Problems • Mutation -> refresh chain • Boilerplate code for connecting data to view 

public class LoginState {
 // Inputs
 public final ObservableField email;
 public final ObservableField phone;
 
 // Outputs
 public final ReadOnlyField emailError;
 public final ReadOnlyField phoneError;
 public final ReadOnlyField loginEnabled; public class LoginState {
 // Inputs
 public final ObservableField email;
 public final ObservableField phone;
 
 // Outputs
 public final ReadOnlyField emailError;
 public final ReadOnlyField phoneError;
 public final ReadOnlyField loginEnabled; Solution Preview 

public class LoginState {
 // Inputs
 public final ObservableField email;
 public final ObservableField phone;
 
 // Outputs
 public final ReadOnlyField emailError;
 public final ReadOnlyField phoneError;
 public final ReadOnlyField loginEnabled; Solution Preview Input, Output Fields 

LoginState() {
 
 Observable emailObservable = toObservable(email);
 Observable phoneObservable = toObservable(phone);
 
 Observable emailValid, phoneValid; 
 emailValid = emailObservable.map(
 email -> FormUtils.checkEmail(email)
 );
 
 phoneValid = phoneObservable.map(
 phone -> FormUtils.checkPhone(phone)
 );
 
 emailError = toField(emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email";
 );
 
 phoneError = toField(phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 );
 
 loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ));
 } LoginState() {
 
 Observable emailObservable = toObservable(email);
 Observable phoneObservable = toObservable(phone);
 
 Observable emailValid, phoneValid; 
 emailValid = emailObservable.map(
 email -> FormUtils.checkEmail(email)
 );
 
 phoneValid = phoneObservable.map(
 phone -> FormUtils.checkPhone(phone)
 );
 
 emailError = toField(emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email";
 );
 
 phoneError = toField(phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 );
 
 loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ));
 } 

LoginState() {
 
 Observable emailObservable = toObservable(email);
 Observable phoneObservable = toObservable(phone);
 
 Observable emailValid, phoneValid; 
 emailValid = emailObservable.map(
 email -> FormUtils.checkEmail(email)
 );
 
 phoneValid = phoneObservable.map(
 phone -> FormUtils.checkPhone(phone)
 );
 
 emailError = toField(emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email";
 );
 
 phoneError = toField(phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 );
 
 loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ));
 } 

boolean emailValid = FormUtils.checkEmail(email);
 boolean phoneValid = FormUtils.checkPhone(phone);
 
 String emailError = emailValid ? null : "Invalid Email";
 String phoneError = phoneValid ? null : "Invalid Phone";
 boolean loginEnabled = emailValid && phoneValid;
 Static Code 

boolean emailValid = FormUtils.checkEmail(email);
 boolean phoneValid = FormUtils.checkPhone(phone);
 
 String emailError = emailValid ? null : "Invalid Email";
 String phoneError = phoneValid ? null : "Invalid Phone";
 boolean loginEnabled = emailValid && phoneValid;
 Static Code 

boolean emailValid = FormUtils.checkEmail(email);
 boolean phoneValid = FormUtils.checkPhone(phone);
 
 String emailError = emailValid ? null : "Invalid Email";
 String phoneError = phoneValid ? null : "Invalid Phone";
 boolean loginEnabled = emailValid && phoneValid;
 inState() {
 Observable emailObservable = toObservable(email);
 Observable phoneObservable = toObservable(phone);
 Observable emailValid, phoneValid; emailValid = emailObservable.map(
 email -> FormUtils.checkEmail(email)
 );
 phoneValid = phoneObservable.map(
 phone -> FormUtils.checkPhone(phone)
 );
 
 emailError = toField(emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email";
 );
 phoneError = toField(phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 );
 loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ));
 Static Code 


 
 
 
 
 
 
 
 
 
 
 
 
 



 
 
 
 
 
 
 
 


public class LoginActivity extends AppCompatActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState); 
 ActivityLoginBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_login); 
 binding.setState(new LoginState());
 }
 
 } 

public class LoginActivity extends AppCompatActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState); 
 ActivityLoginBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_login); 
 binding.setState(new LoginState());
 }
 
 } No “findViewById” No listeners 

Mutation Imperative Code 

Mutation a = 1 c = 10 * a —> 10 a = 3 print(c) —> 10 Imperative Code 

Mutation a = 1 c = 10 * a —> 10 a = 3 print(c) —> 10 Imperative Code Reactive Code 

Mutation a = 1 c = 10 * a —> 10 a = 3 print(c) —> 10 a = 1 c = 10 * a —> 10 a = 3 print(c) —> 30 Imperative Code Reactive Code 

Reactive - How? • Java is not a reactive language • Reactive behavior using RxJava library 

RxJava • Provides Observable class • Stream of values • Operators for manipulating streams 

No content

Map 

Combine Latest 

Login Example with RxJava // Inputs
 Observable email;
 Observable phone;
 // Outputs
 Observable emailError;
 Observable phoneError;
 Observable loginEnabled; 

Observable emailValid = email.map(new Func1() {
 @Override
 public Boolean call(String email) {
 return FormUtils.checkEmail(email);
 }
 }) Observable emailValid = email.map(new Func1() {
 @Override
 public Boolean call(String email) {
 return FormUtils.checkEmail(email);
 }
 }) 

Observable emailValid = email.map(new Func1() {
 @Override
 public Boolean call(String email) {
 return FormUtils.checkEmail(email);
 }
 }) 

Observable emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); Observable emailValid = email.map(new Func1() {
 @Override
 public Boolean call(String email) {
 return FormUtils.checkEmail(email);
 }
 }) 

Observable emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); Observable emailValid = email.map(new Func1() {
 @Override
 public Boolean call(String email) {
 return FormUtils.checkEmail(email);
 }
 }) Observable emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); 

// Transformations
 Observable emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); 

// Transformations
 Observable emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); Observable phoneValid = phone.map(
 phone -> FormUtils.checkPhone(phone);
 ); 

// Transformations
 Observable emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); Observable phoneValid = phone.map(
 phone -> FormUtils.checkPhone(phone);
 ); emailError = emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email"
 ); 
 phoneError = phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 ); 

// Transformations
 Observable emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); Observable phoneValid = phone.map(
 phone -> FormUtils.checkPhone(phone);
 ); emailError = emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email"
 ); 
 phoneError = phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 ); loginEnabled = Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ); 

Binding to View // Inputs
 Observable email; // <- emailEditText.text
 Observable phone; // <- phoneEditText.text
 // Outputs
 Observable emailError; // -> emailEditText.error
 Observable phoneError; // —> phoneEditText.error
 Observable loginEnabled; // -> loginButton.enabled 

View -> Observable // Inputs
 Observable email = RxTextView.textChanges(emailEditText);
 

Observable -> View loginEnabled.subscribe(RxView.enabled(loginButton)); 

Observable -> View loginEnabled.subscribe(RxView.enabled(loginButton)); @Override
 protected void onDestroy() {
 subscription.unsubscribe();
 super.onDestroy();
 } RxJava requires cleanup New Boilerplate :/ Subscription subscription = 

Data Binding 
 
 
 
 
 
 
 

Binding Attributes public class LoginState {
 public ObservableField loginEnabled; 

Binding Attributes public class LoginState {
 public ObservableField loginEnabled; loginEnabled.set(true) 

Binding Attributes public class LoginState {
 public ObservableField email; } User input 

Code Generation // AutoGenerated for activity_login.xml
 public class ActivityLoginBinding {
 
 public void setState(LoginState state);
 } 
 

View Setup ActivityLoginBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_login);
 
 binding.setState(new LoginState());
 

databinding.ObservableField View Attribute Data Binding 

databinding.ObservableField View Attribute Data Binding Autogenerated code 

rx.Observable databinding.ObservableField View Attribute Data Binding Autogenerated code RxBinding 

rx.Observable databinding.ObservableField View Attribute Data Binding Autogenerated code RxBinding Manual code for each attribute
 + Cleanup Boilerplate 

rx.Observable databinding.ObservableField View Attribute Data Binding Autogenerated code RxBinding Manual code for each attribute
 + Cleanup Boilerplate Converter 

rx.Observable databinding.ObservableField View Attribute Data Binding Autogenerated code Converter 

Converter public static Observable toObservable(ObservableField field) { }
 public static ObservableField toField(Observable observable) { } 

Observable -> View Observable loginEnabled = Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ); 

Observable -> View Observable loginEnabled = Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ); 

ObservableField loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 )); Observable -> View Observable loginEnabled = Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ); 

ObservableField loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 )); Observable -> View Observable loginEnabled = Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ); ObservableField loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 )); 

View -> Observable public class LoginState { public ObservableField email = new ObservableField<>(""); 

View -> Observable public class LoginState { public ObservableField email = new ObservableField<>(""); Observable emailObservable = toObservable(email); 

View -> Observable public class LoginState { public ObservableField email = new ObservableField<>(""); Observable emailObservable = toObservable(email); emailObservable.map(...) 

Summary • Removed findViewById & listeners boilerplate using Data Binding • databinding.ObservableField <—> rx.Observable • No Subscriptions. Memory leak free code by default 

Pattern • State class for presentation logic • View setup in XML using State instance • Activity only initializes 

Pattern • State class for presentation logic • View setup in XML using State instance • Activity only initializes This is MVVM 

MVVM Model ViewModel View 

MVVM Model ViewModel View • Business Logic • Logic that will remain same for console app 

MVVM Model ViewModel View • Business Logic • Logic that will remain same for console app • State of the view • eg: Boolean field for whether button is enabled 

MVVM Model ViewModel View • Business Logic • Logic that will remain same for console app • State of the view • eg: Boolean field for whether button is enabled • Presentation Logic • eg: Button should be disabled when email is invalid 

MVVM Model ViewModel View • Business Logic • Logic that will remain same for console app • State of the view • eg: Boolean field for whether button is enabled • Presentation Logic • eg: Button should be disabled when email is invalid • Observes for changes in VM and updates itself • Push values in VM when user inputs 

Dependencies Model ViewModel View 

Dependencies • Model is unaware about ViewModel • ViewModel is unaware about View • Multiple views can share a same ViewModel Model ViewModel View 

LoginState -> ViewModel 

Composition Item Listing Item Details Item Details .
 .
 . Item Checkout Item Details Item Customization 

Composition Item Listing Item Details Item Details .
 .
 . Item Checkout Item Details Item Customization Reuse Plugin ViewModels to build the UI 

Item Checkout Item Details Item Customisation 

Item Checkout Item Details Item Customisation class ItemCheckoutViewModel {
 ItemViewModel detailVM;
 ItemCustomisationViewModel customisationVM;
 
 // Initialise in constructor
 
 } 


 
 
 
 
 
 Item Checkout Item Details Item Customisation 
 
 
 
 
 
 


 
 
 
 
 
 Item Checkout Item Details Item Customisation 

Beauty of MVVM • Consistent View Setup from: • layout_id • ViewModel object compatible with that layout 

Dynamic Composition • List • Child layout Item Listing Item Details Item Details .
 .
 

Dynamic Composition • List • Child layout Item Listing Item Details Item Details .
 .
 

Custom Attributes 

Custom Attributes @BindingAdapter(value = {"items", "item_layout"})
 public static void bindAdapter(RecyclerView recyclerView,
 List states,
 @LayoutRes int layoutId) {
 ...
 }
 

Consistent Api 

Dependencies • ViewModel cannot have references to android.Context • How to invoke actions like Navigation? 

Dependencies • ViewModel cannot have references to android.Context • How to invoke actions like Navigation? Abstract actions into an interface 

public interface Navigator {
 void openItemDetailsPage(Item item);
 } 

public class ItemViewModel {
 public final Action0 itemClicked;
 
 public ItemViewModel(final Item item, final Navigator navigator) {
 itemClicked = () -> navigator.openItemDetailsPage(item);
 }
 } public interface Navigator {
 void openItemDetailsPage(Item item);
 } 

Testability • All UI interactions can be triggered on ViewModels • All UI states can be asserted from ViewModel • Unit Tests instead of Instrumentation -> Faster 

Testability 
 @Test
 public void detailsPage_isOpened_onClick() throws Exception {
 Item item = new Item("Item 1");
 Navigator mockNavigator = mock(Navigator.class);
 ItemViewModel viewModel = new ItemViewModel(item, mockNavigator);
 
 viewModel.itemClicked.call();
 
 verify(mockNavigator).openDetailsPage(item);
 }
 

Conclusions • RxJava and Data Binding together • UI = express output as a function of input • MVVM • Easy composition of views 

manas-chaudhari/android-mvvm @chaudharimanas