Kotlin Simple Counting App with View Model+Live Data

I am not going to explain a lot about android architecture components. But I will provide you a brief introduction about android architecture components which are needed for this simple app. Then you can simply understand what is going on.

You can get more information please read before continuing this

Introduction to Android Architecture Components

Android architecture components

As you know they are a collection of android libraries that help to design robust, testable and maintainable apps. They are

1. View Model
2. Live data
3. Room
4. Compose
5. Data Binding
6. Lifecycles etc.

In here You can find more details about android architecture components. OK I know you don’t like long introduction.Let’s start building our simple app and understand the concept!.

Please open your IDE and create new android project.Include Kotlin support for you app. After the creation Please add following two lines into your app level gradle file.These are the dependencies for View Model and Live Data.

implementation "android.arch.lifecycle:extensions:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-livedata:$lifecycle_version"

Building the UI

Create the UI as follows.

activity_main.XML

Here I used Text View and floating Button for the UI. Pretty Simple!. When we press the button always the text field count value must be increased by one. That data value must not be changed in screen configurations like screen rotations. That’s the reason for using the view model and Live Data. Live data hold and observe data changes of the count value. So any activity within the app can get data from the Live data class. It can act like a data basket that automatically updates its data(In our app it is counting value).

Live data -act like a holder

Here we need to manage the data flow to the UI and manage data to the Live Data component. For that, we use the View Model.OK Let’s create our Logic!. Create a new kotlin file called MainActivityViewModel.kt .

Now copy and paste the following code. I will explain!.

MainActivityViewModel.kt

Here you will confuse sometimes. Mutable live data is also Live data that is mutable. See pretty simple!. First, we need to create this class as a subclass of the View Model class. I have created an integer variable to hold our counting values.

private var clickCount:Int = 0

Then I created our live data object(countLiveData) to hold our integer values.

private var countLiveData = MutableLiveData<Int>()

We have to provide a method to get initial count value at the beginning of our app.This will return Live Data object with initial counting values.

open fun getInitialcount():MutableLiveData<Int>{
    countLiveData.value = clickCount
    return countLiveData
}

After that we need a method to update our Live Data counting values.That’s the reason I created getCurrent() method.OK Let’s move into our Main Activity.At there we need to configure our view components and trigger events.Please Copy and Paste Following code.

In Main Activity we need to create a View Model to handle counting data.So I created mainActivityViewModel.

mainActivityViewModel= ViewModelProviders.of(this).get(MainActivityViewModel::class.java)

View model provides a Live Data object with initial counting value is equal to zero at the beginning of the app.After getting that object we need to observe Live Data counting value changes.That is the use of count instance here.Text Field auto update its observed value.Initial count must be called once.

var count:LiveData<Int> = mainActivityViewModel.getInitialcount()
count.observe(this, Observer {
    txt1.setText("Count is "+it)
})

OK!Be cool .Now we need to add that live data counting value function to the button event at Last.

fab.setOnClickListener {
    mainActivityViewModel.getCurrentCount()
}

Now Our app is Ready to run.Run your app and test it.When you are running rotate your screen and check the count value.It will not be changed.

Here live data object observes the current counting value and give it to the text field. View model object manage the updating and initialization of the Live data counting value.

The source code of the complete app is available on github.

Dineth95/Android-Kotlin-Counting-simple-app

Thanks for reading this article. Be sure to clap/recommend as much as you can and also share with your friends. It means a lot to me.

Also, Let’s become friends on LinkedIn and Github.