Bind layout views to Architecture Components

Stay organized with collections Save and categorize content based on your preferences.

The AndroidX library includes the Architecture Components, which you can use to design robust, testable, and maintainable apps. The Data Binding Library works seamlessly with the Architecture Components to further simplify the development of your UI. The layouts in your app can bind to the data in the Architecture Components, which help you manage the UI controller's lifecycle and notify the UI about changes in the data.

This page shows how to incorporate the Architecture Components into your app to get the most from using the Data Binding Library.

Use LiveData to notify the UI about data changes

You can use LiveData objects as the data binding source to automatically notify the UI about changes in the data. For more information about this Architecture Component, see the LiveData overview.

Unlike objects that implement Observable—such as observable fields—LiveData objects know about the lifecycle of the observers subscribed to the data changes. This knowledge enables many benefits, which are explained in The advantages of using LiveData. In Android Studio version 3.1 and higher, you can replace observable fields with LiveData objects in your data binding code.

To use a LiveData object with your binding class, you need to specify a lifecycle owner to define the scope of the LiveData object. The following example specifies the activity as the lifecycle owner after the binding class has been instantiated:

classViewModelActivity:AppCompatActivity(){
overridefunonCreate(savedInstanceState:Bundle?){
// Inflate view and obtain an instance of the binding class.
valbinding:UserBinding=DataBindingUtil.setContentView(this,R.layout.user)
// Specify the current activity as the lifecycle owner.
binding.setLifecycleOwner(this)
}
}

class ViewModelActivityextendsAppCompatActivity{
@Override
protectedvoidonCreate(BundlesavedInstanceState){
// Inflate view and obtain an instance of the binding class.
UserBindingbinding=DataBindingUtil.setContentView(this,R.layout.user);
// Specify the current activity as the lifecycle owner.
binding.setLifecycleOwner(this);
}
}

You can use a ViewModel component, as explained in the following section, to bind the data to the layout. In the ViewModel component, you can use the LiveData object to transform the data or merge multiple data sources. The following example shows how to transform the data in the ViewModel:

classScheduleViewModel:ViewModel(){
valuserName:LiveData
init{
valresult=Repository.userName
userName=Transformations.map(result){result->result.value}
}
}

class ScheduleViewModelextendsViewModel{
LiveDatausername;
publicScheduleViewModel(){
Stringresult=Repository.userName;
userName=Transformations.map(result,result->result.value);
}
}

Use ViewModel to manage UI-related data

The Data Binding Library works seamlessly with ViewModel components. The ViewModel exposes the data that the layout observes and reacts to its changes. Using ViewModel components with the Data Binding Library lets you move UI logic out of the layouts and into the components, which are easier to test. The Data Binding Library ensures the views are bound and unbound from the data source when needed. Most of the remaining work consists of making sure that you're exposing the correct data. For more information about this Architecture Component, see the ViewModel overview.

To use the ViewModel component with the Data Binding Library, you must instantiate your component—which inherits from the ViewModel class, obtain an instance of your binding class, and assign your ViewModel component to a property in the binding class. The following example shows how to use the component with the library:

classViewModelActivity:AppCompatActivity(){
overridefunonCreate(savedInstanceState:Bundle?){
// Obtain the ViewModel component.
valuserModel:UserModelbyviewModels()
// Inflate view and obtain an instance of the binding class.
valbinding:UserBinding=DataBindingUtil.setContentView(this,R.layout.user)
// Assign the component to a property in the binding class.
binding.viewmodel=userModel
}
}

class ViewModelActivityextendsAppCompatActivity{
@Override
protectedvoidonCreate(BundlesavedInstanceState){
// Obtain the ViewModel component.
UserModeluserModel=newViewModelProvider(this).get(UserModel.class);
// Inflate view and obtain an instance of the binding class.
UserBindingbinding=DataBindingUtil.setContentView(this,R.layout.user);
// Assign the component to a property in the binding class.
binding.viewmodel=userModel;
}
}

In your layout, assign the properties and methods of your ViewModel component to the corresponding views using binding expressions, as shown in the following example:

<CheckBox
android:id="@+id/rememberMeCheckBox"
android:checked="@{viewmodel.rememberMe}"
android:onCheckedChanged="@{()->viewmodel.rememberMeChanged()}"/>

Use an Observable ViewModel for more control over binding adapters

You can use a ViewModel component that implements the Observable interface to notify other app components about changes in the data, similar to how you would use a LiveData object.

There are situations where you might prefer to use a ViewModel component that implements the Observable interface over using LiveData objects, even if you lose the lifecycle management capabilities of LiveData. Using a ViewModel component that implements Observable gives you more control over the binding adapters in your app. For example, this pattern gives you more control over the notifications when data changes; it also lets you specify a custom method to set the value of an attribute in two-way data binding.

To implement an observable ViewModel component, you must create a class that inherits from the ViewModel class and implements the Observable interface. You can provide custom logic when an observer subscribes or unsubscribes to notifications using the addOnPropertyChangedCallback() and removeOnPropertyChangedCallback() methods. You can also provide custom logic that runs when properties change in the notifyPropertyChanged() method. The following code example shows how to implement an observable ViewModel:

/**
 * A ViewModel that is also an Observable,
 * to be used with the Data Binding Library.
 */
openclassObservableViewModel:ViewModel(),Observable{
privatevalcallbacks:PropertyChangeRegistry=PropertyChangeRegistry()
overridefunaddOnPropertyChangedCallback(
callback:Observable.OnPropertyChangedCallback){
callbacks.add(callback)
}
overridefunremoveOnPropertyChangedCallback(
callback:Observable.OnPropertyChangedCallback){
callbacks.remove(callback)
}
/**
 * Notifies observers that all properties of this instance have changed.
 */
funnotifyChange(){
callbacks.notifyCallbacks(this,0,null)
}
/**
 * Notifies observers that a specific property has changed. The getter for the
 * property that changes must be marked with the @Bindable annotation to
 * generate a field in the BR class to be used as the fieldId parameter.
 *
 * @param fieldId The generated BR id for the Bindable field.
 */
funnotifyPropertyChanged(fieldId:Int){
callbacks.notifyCallbacks(this,fieldId,null)
}
}

/**
 * A ViewModel that is also an Observable,
 * to be used with the Data Binding Library.
 */
class ObservableViewModelextendsViewModelimplementsObservable{
privatePropertyChangeRegistrycallbacks=newPropertyChangeRegistry();
@Override
protectedvoidaddOnPropertyChangedCallback(
Observable.OnPropertyChangedCallbackcallback){
callbacks.add(callback);
}
@Override
protectedvoidremoveOnPropertyChangedCallback(
Observable.OnPropertyChangedCallbackcallback){
callbacks.remove(callback);
}
/**
 * Notifies observers that all properties of this instance have changed.
 */
voidnotifyChange(){
callbacks.notifyCallbacks(this,0,null);
}
/**
 * Notifies observers that a specific property has changed. The getter for the
 * property that changes must be marked with the @Bindable annotation to
 * generate a field in the BR class to be used as the fieldId parameter.
 *
 * @param fieldId The generated BR id for the Bindable field.
 */
voidnotifyPropertyChanged(intfieldId){
callbacks.notifyCallbacks(this,fieldId,null);
}
}