Data binding with MVVM

Agenda

• MVVM
• Data binding
• 2-way data binding
• Event callbacks
• Binding Adapters
• Observable Objects
• Live Data

What is MVVM?

• Model
• View
• ViewModel

Model

• It has the data, state and business logic.
• Talk to other layers for api calling or database operations.
• Acts as a data access layer.
• Not tied to the view or view controller.

View

• View to be displayed to the user.
• Bind to the ViewModel for data and action callbacks.
• Multiple views can bind to a single view model and vice versa.

ViewModel

• Middle layer between Model and View.
• Wraps the data and send it to View.
• Observe callbacks of view events and send it to Model.
• Does not have a reference to the View

How to achieve it?

​

Android data binding

​

Get started with data binding

Any other benefit?

​

Boilerplate code

TextView textView = findViewById(R.id.txv_user_name);

textView.setText(model.getUserName());

​

​

​

Boilerplate code

​

EditText editText = findViewById(R.id.edt_username);

model.setUserName(editText.getText().toString());

Reduced Code with data binding

<TextView

android:text="@{viewModel.userName}"/>

Reduced Code with data binding

​

<EditText

android:text="@={viewModel.username}"/>

​

Login Page Example

• Have 2 fields username and password.
• Have login button.
• On click of login, show error on field if validation fails.

​

Login Page Example

Model

Model

public class LoginForm {

public String username;

public String password;

}

​

Model

public boolean isUsernameValid() {

return !TextUtils.isEmpty(username) && username.length() >= 4;

}

public boolean isPasswordValid() {

return !TextUtils.isEmpty(password) && password.length() >= 4;

}

Login Page Example

ViewModel

ViewModel

public class LoginViewModel {

public LoginForm loginForm = new LoginForm();

public void onLoginClick() {

isValid();

}

}

ViewModel

private boolean isValid() {

boolean passwordValid = loginForm.isPasswordValid();

boolean usernameValid = loginForm.isUsernameValid();

return usernameValid && passwordValid;

}

Login Page Example

View

View

<layout>

<data>

<variable name="loginViewModel"

type="com.example.viewModel.LoginViewModel"/>

</data><!--View root layout-->

</layout>

​

View

<EditText

android:id="@+id/edt_username"

android:text="@={loginViewModel.loginForm.username}"/>

<EditText

android:id="@+id/edt_password"

android:text="@={loginViewModel.loginForm.password}"/>

View

<Button

android:id="@+id/btn_login"

android:onClick="@{() -> loginViewModel.onButtonClick()}"/>

Login Page Example

• Have 2 fields username and password.
• Have login button.
• On click of login, show error on field if validation fails.

ViewModel

public LoginForm loginForm = new LoginForm();

public ObservableField<String> usernameError =

new ObservableField<>();

public ObservableField<String> passwordError =

new ObservableField<>();

ViewModel

if (!usernameValid){

usernameError.set("Please enter valid username");

}

if (!passwordValid){

passwordError.set("Please enter valid password");

}

ViewModel

@BindingAdapter("error")

public static void setError(EditText editText, String error) {

editText.setError(error);

}

View

<EditText

android:id="@+id/edt_username"

app:error="@{loginViewModel.usernameError}"/>

<EditText

android:id="@+id/edt_password"

app:error="@{loginViewModel.passwordError}"/>

​

How view is connected to ViewModel?

​

Connect DataBinding and ViewModel

setContentView(R.layout.activity_login);

​

​

Connect DataBinding and ViewModel

setContentView(R.layout.activity_login);

ActivityLoginBinding loginBinding = DataBindingUtil.setContentView(this, R.layout.activity_login);

LoginViewModel loginViewModel = new LoginViewModel();

loginBinding.setLoginViewModel(loginViewModel);

​

​

Recap..

Recap..

• Added data and business logic in Model.

Recap..

• Added data and business logic in Model.
• Added model, click event callback, BindingAdapter in ViewModel.

Recap..

• Added data and business logic in Model.
• Added model, click event callback, BindingAdapter in ViewModel.
• Added a variable of ViewModel in View.

Recap..

• Added data and business logic in Model.
• Added model, click event callback, BindingAdapter in ViewModel.
• Added a variable of ViewModel in View.
• Connected View to ViewModel in Activity.

Observable Objects

​

Observable Objects

• A class which extends BaseObservable
• Class will be responsible to notify the changes
• Assign Bindable annotation to property getter
• Call notifyPropertyChanged() when required

ViewModel

public class LoginViewModel extends BaseObservable {

private String userName;

@Bindable

public String getUserName() {

return userName;

}

}

ViewModel

public void onLoginClick() {

if (isValid()) {

userName = "Test user name";

notifyPropertyChanged(BR.userName);

}

}

LiveData

​

LiveData

• Connect activities/fragment to the data
• Ensures your UI matches your data state
• Lifecycle aware
• No memory leaks
• No crashes due to stopped activities
• No more manual lifecycle handling
• Always up to date data
• Proper configuration changes

ViewModel

public class LoginViewModel {

private MutableLiveData<String> userNameLiveData =

new MutableLiveData<>();

​

public MutableLiveData<String> getUserNameLiveData() {

return userNameLiveData;

}

}

​

​

ViewModel

public void onLoginClick() {

if (isValid()) {

userNameLiveData.setValue("Test name");

}

}

​

Activity

Observer<String> observer = new Observer<String>() {

@Override

public void onChanged(@Nullable String username) {

Toast.makeText(LoginActivity.this, username,

Toast.LENGTH_SHORT).show();

}

};

​

​

Activity

loginViewModel.getUserNameLiveData().observe(this, observer);

Questions??

Thank You