Working together with ViewModal and LiveData

Hi Guys, in this post you can find about ViewModal and LiveData components. It is a part of "Jetpack" library.

The ViewModel class is mainly designed to store and manage UI-related data in a lifecycle way. ViewModel will automatically preserve data in case of layout changes. (Portrait - Landscape).

LiveData is Observable data holder class. Responsible for passing data changes to our UI part means Activity/Fragment.

Let's see demo of how to use ViewModel and LiveData together in App. In below example we are going to generate random numbers in ViewModel class and store in LiveData object and Observe changes in that LiveData object value and update textView in MainActivity UI

STEP 1.

Include required dependencies in your app level gradle file.

    def lifecycle_version = "1.1.1"
    implementation "android.arch.lifecycle:extensions:$lifecycle_version"
    annotationProcessor "android.arch.lifecycle:compiler:$lifecycle_version"

STEP 2.

Design your activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textColor="@color/colorPrimary"
        android:layout_centerInParent="true"
        android:layout_below="@+id/button"
        android:layout_marginTop="20dp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Random Number"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

STEP 3.

Create MainViewModal.java class which extends ViewModal class which contains main logic for activity.

package viewmodal;

import android.arch.lifecycle.MutableLiveData;
import android.arch.lifecycle.ViewModel;
import android.util.Log;

import java.util.Random;

public class MainViewModal extends ViewModel {

    private MutableLiveData<String> liveData;

    public MutableLiveData<String> getRandomNumber() {

        if (liveData == null) {
            liveData = new MutableLiveData<>();

            generateRandomNumber();
        }
        return liveData;
    }

    public void generateRandomNumber() {
        int randomNumber = new Random().nextInt(61) + 20;
        liveData.setValue(String.valueOf(randomNumber));
        Log.v("generateRandomNumber", "randomNumber : "+randomNumber);
    }

    @Override
    protected void onCleared() {
        super.onCleared();
        liveData = null;
    }
}

STEP 4.

And Finally In your MainActivity.java file declare your ViewModel class provider and access it's properties to observe UI element for LiveData changes

package demo.com.viewmodalwithlivedata;

import android.arch.lifecycle.LiveData;
import android.arch.lifecycle.Observer;
import android.arch.lifecycle.ViewModelProviders;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

import viewmodal.MainViewModal;

public class MainActivity extends AppCompatActivity {

    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.textView);

        final MainViewModal viewModel = ViewModelProviders.of(this).get(MainViewModal.class);
        LiveData<String> data = viewModel.getRandomNumber();
        data.observe(this, new Observer<String>() {
            @Override
            public void onChanged(@Nullable String s) {
                textView.setText(s);
                Log.v("onChange", s);
            }
        });


        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewModel.generateRandomNumber();
            }
        });
    }
}

Final OUTPUT

Happy Coding...