Build an App that uses LiveData, ViewModel, Data Binding, and LifeCycle in Fragment using Kotlin.
Version
Android Studio 4.0, Kotlin 1.3, Android 9.0
This guide will help you incorporate LiveData, ViewModel, DataBinding and LifeCycle components into your app using Kotlin. It is a very easy guide to follow.
A little note on these components
LiveData is a component that notifies registered views when there is a change in the underlying app data. For example, if the value of a data is “them” and it changes to “their” the view will be notified automatically. LiveData is lifecycle-aware, the registered view has to be in an active state to be notified of the change.
ViewModel is a component that makes app data to survive configuration changes such as screen rotation, keyboard availability.
Data Binding is a component that enables the developer to bind UI elements in the layout file to data sources in the app.
LifeCycle manages the life cycle of activities and fragments.
Lets get started.
We are going to create a simple app that tracks the quantity of water you drink in a day.
Open Android Studio and create a new project, name it “CleanInside”. Select Kotlin from the language dropdown list and click on Finish button. Wait for Gradle sync to finish and you are ready to start.
First configure the project for Data Binding. Open the build.gradle(Module: app) file, add the code below and hit sync project.
Lines 25 to 27 tells Gradle to build your project with Data Binding library. Lines 38 to 43 adds Gradle dependencies for LifeCycle, LiveData, ViewModel, Fragments and Navigation. Sync your project.
This is where ViewModel and LiveData comes in. Create a new Kotlin class named “QuantityViewModel”. Copy and paste the code below into the class file.
As you can see, the QuantityViewModel class extends the ViewModel class. According to Android documentation, it is recommended that LiveData field inside ViewModel should be editable, outside the ViewModel, LiveData field should be readable. To achieve this, use backing property to create an editable version of the LiveData field. The editable version should be of type MutableLiveData, then create the LiveData version of the field. Lines 8 and 9 shows how it is done. The MutableLiveData field will be used to update the LiveData field within the ViewModel through internal methods. The LiveData version of the field is the one that will be exposed to other components in the app.
Now we have a LiveData inside a ViewModel class.
Next create a blank fragment named “QuantityFragment” and paste the code below into the layout file of the fragment. This is where you enable the layout file to bind directly with data in the ViewModel. In this guide, I am demonstrating one-way Data Binding. For a layout file to bind with data, all views must be wrapped with a “layout” tag. Within the layout tag, declare a “data” tag that will hold the data location information, then create other views you need on the layout file.
Lines 1 and 120 wraps all views in a “layout” tag. Lines 7 to 11 declares a “data” tag that defines the data.
Lines 30 and 40 binds the click events of the buttons to functions in the QuantityViewModel. The function will run when there is a click event on the corresponding button. Line 94 binds the text of the TextView to a field in the QuantityViewModel. Anytime there is a change in the value of the field, the text in the TextView changes to correspond with the value of the field.
Next, in the class file of the QuantityFragment, copy and paste the code below.
A ViewModel needs to be associated with a UI controller (an Activity or a Fragment). To connect the two, create a reference to the ViewModel in the UI controller (in our app, it is a Fragment). Line 18 in the code below takes care of that. Read the comments in the code to understand what is going on in there.
Next create a navigation resource and add QuantityFragment to it. Check the video below on how to do it.
Add the navigation graph to the MainActivity layout file, see code below. Lines 9 to 19 shows how to add navigation graph.
Now our app is ready. You can download the code here
The video below shows how the app data survives configuration changes such as screen rotation.
Enjoy.
