How To Implement MVVM On Android

Introduction

 

In this article, I will demonstrate how the latest MVVM (Model View View Model) framework functions for the Login form. The following requirements should be fulfilled before starting this article.

• Android Studio
• Android SDK
• Java
• XML 

Once the SDK library has installed, we can create a new project in Android Studio. Open your project inside an app-level Gradle file and add the code shown below in the following format,

dataBinding{
    enabled=true;
}

Once we've added data binding we can go to the layout folder. This folder is displayed in the resource folder inside. Open the activity_main.xml file. You will then need to change the root layout name to “Layout”.

 

The code is below,

<?xml version="1.0" encoding="utf-8"?>
  <layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.learning.designpattern.MainActivity">
    </LinearLayout>
</layout>

Next, go to the Java folder and create a new Java class. In this class, we added view model data and we need to add more to BaseObservable. We now need to create a String value. This value will be shown on our XML input page. Next, create a constructor in the view model. Then create a model class and add the String value. This string value is for receiving and setting data in the class file or view model file. Finally, we need to create two constructors.

 

The first one is the dummy constructor and the second one is the single parameter constructor.

 

The code is shown below,

public class CommonModel {
    public String name;
    public String mStrname;
    public CommonModel() {
    }
    public CommonModel(String mStrname) {
        this.mStrname = mStrname;
    }
}

Now we need to go to the viewmodel class and create a constructor to be passing a value in model. The model setting value should be set as the view model value. The code is shown below,

public class CommonViewModel extends BaseObservable {

String name;
public String mStrname;
public CommonViewModel(CommonModel mCommonModel) {
        this.mStrname = mCommonModel.mStrname;
    }
}

Now we must find the acitivity_main.xml file. We can add the input box or edit text box, and we can set the height and width also.

 

The code is given below,

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

In the child layout above we need to configure the data. Then we need to add the variable that contains name and type. Name is an object and type is an viewmodel class name. The code is given below,

<data>
   <variable
   name="Username"
   type="view_model.CommonViewModel"/>

</data>

In the XML file input box, we need to add a hint and a value to be referred to as our ViewModel class name.

 

Code is given below,

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@{Username.mStrname}" />

Now we define the activity class. The activity class we can declare ActivityMainBinding. Then we can initialize the activitymainbinding. The code is shown below,

mainBinding = DataBindingUtil.setContentView(this,R.layout.activity_main);

We can now create an object in viewmodel class and set it equal to the value in constructor. Then we can bind viewmodel to an activity object.

 

Code is give below,

mainBinding = DataBindingUtil.setContentView(this,R.layout.activity_main);
CommonViewModel mCommonViewModel = new CommonViewModel(new CommonModel("name"));
mainBinding.setUsername(mCommonViewModel);

Now run your project. The MVVM framework should now be functional. I have attached the project also, in case you need any more help.