Android MVVM architecture

Ayushi Agarwal

30 September 2019

Every developer wants to create a clean architecture of project and also achieves this on the first release of the application. But for big projects, if you want to fix any bug, you have to put lot of consideration into the structure of the application code becomes of the complexity of code. The solution of this problem is Android MVVM architecture.

MVVM also called Model-View-ViewModel is project architecture which is currently in fashion. The reason behind its popularity is its clear architecture.

MVVM – Clean Architecture

Android MVVM architecture is used to separate our view (i.e. Activity and Fragments) from your business logic. When we use MVC & MVP architecture, it is very hard to manage the code.

Model-View-ViewModel with Clean Architecture is pretty good in such cases. It goes one step further in separating the responsibilities of your code base. It is used to abstract the logic of the actions that can be performed in your app.

Model

The model is used to represent the actual data and/or information with which we are dealing.

Example -> Model might be user login data (Email, Password)

View

View is the presentation of the data.

Example -> xml and activity files in our Android project.

Model-View-ViewModel

It acts as the link/connection between the Model and View and makes stuff look pretty.

Lets take an example ->

User login-in through MVVM architecture ->

Firstly create a model class which represents our data.

class LoginData : BaseObservable() {

    var email : String = ""
    @Bindable get() {return field}
    set(value) {
        field = value
        notifyPropertyChanged(BR.email)
    }
    var password : String = ""
        @Bindable get() {return field}
        set(value) {
            field = value
            notifyPropertyChanged(BR.password)
        }

}

class LoginData : BaseObservable() {

var email : String = ""

@Bindable get() {return field}

set(value) {

field = value

notifyPropertyChanged(BR.email)

}

var password : String = ""

@Bindable get() {return field}

set(value) {

field = value

notifyPropertyChanged(BR.password)

}

Here, we are binding email & password variable with our xml through “@Bindable” & “BR.email & BR.password”. Now, when user enter email & password, it will automatically saved in Model class variables.

There are one edit text for email, one edit text for password and a submit button.

<layout>

    <data>
        <variable name="data" type="com.firebaseinappmsg.myapplication.MainViewModel"/>

    </data>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:orientation="vertical"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent">


        <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Enter Email"
                android:text="@={data.loginData.email}"/>


        <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Enter Password"
                android:text="@={data.loginData.password}"/>

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="@{() -> data.callApiMethod()}"
                android:text="Submit"/>

    </LinearLayout>

</layout>

<data>

</data>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Enter Email"

android:text="@={data.loginData.email}"/>

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Enter Password"

android:text="@={data.loginData.password}"/>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="@{() -> data.callApiMethod()}"

android:text="Submit"/>

</LinearLayout>

</layout>

Now, we are going to create our ViewModel class.

class MainViewModel : ViewModel() {

    var responseCode = MutableLiveData&lt;Int&gt;()

    var loginData : LoginData
    init {
        loginData = LoginData()
    }

    fun callApiMethod() {
        /*call api and update mutableLiveData*/
    }
}

class MainViewModel : ViewModel() {

var responseCode = MutableLiveData<Int>()

var loginData : LoginData

init {

loginData = LoginData()

}

fun callApiMethod() {

/*call api and update mutableLiveData*/

}

Create a viewModel class which works as connection between our view & model class. Here, we create our Model class object in his “init” method and a method callApiMethod() which will be called when we click on “Submit” button.

Now, we are going to create Activity and connect our view & viewModel in it.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    mainViewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
    binding = DataBindingUtil.setContentView(this, R.layout.layout_login)
    binding.data = mainViewModel

    mainViewModel.responseCode.observe(this, Observer { /*do something*/ })
}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

mainViewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)

binding = DataBindingUtil.setContentView(this, R.layout.layout_login)

binding.data = mainViewModel

mainViewModel.responseCode.observe(this, Observer { /*do something*/ })

}

Here, we observer our mutableLiveData. When we update responseCode value, it will be observed in our activity.

For more information, you can check this link -> MVVM