Belajar ViewModel Dengan Contoh Project Aplikasi Android

Tujuan

Pada codelab kali ini, Anda akan mempelajari bagaimana mengimplementasikan ViewModel dalam membuat aplikasi Android. Hasil dari codelab kali ini akan menjadi seperti ini:

Logika Dasar

Melakukan input → mengirim data ke ViewModel → melakukan penghitungan → mengirim data ke Activity → melakukan perubahan rotasi → data masih terjaga.

Codelab ViewModel

1. Buat proyek baru di Android Studio dengan kriteria sebagai berikut:

   Nama Project	MyViewModel
   Target & Minimum Target SDK	Phone and Tablet, Api level 21
   Tipe Activity	Empty Activity
   Activity Name	MainActivity
   Use AndroidX artifacts	True
   Language	Kotlin/Java

2. Selanjutnya tambahkan library ViewModel di build.gradle(module:App):
   

   implementation 'androidx.lifecycle:lifecycle-extensions:2.1.0'

   
   
3. Buka layout activity_main.xml, kemudian ubah kode di dalamnya menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/length" />

    <EditText
        android:id="@+id/edt_length"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:inputType="numberDecimal"
        android:lines="1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/width" />

    <EditText
        android:id="@+id/edt_width"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:inputType="numberDecimal"
        android:lines="1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/height" />

    <EditText
        android:id="@+id/edt_height"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:inputType="numberDecimal"
        android:lines="1" />

    <Button
        android:id="@+id/btn_calculate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/calculate" />

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/result"
        android:textSize="24sp"
        android:textStyle="bold" />

</LinearLayout>

Tambahkan juga resource string-nya. Tambahkan semua string yang akan digunakan di project ini. Buka berkas strings.xml dan tambahkan kode berikut ini:

<resources>
    <string name="app_name">MyViewModel</string>
    <string name="width">Lebar</string>
    <string name="result">Hasil</string>
    <string name="calculate">Hitung</string>
    <string name="height">Tinggi</string>
    <string name="length">Panjang</string>
</resources>

Selanjutnya, buat kelas baru dengan nama MainViewModel. Ubah dan tambahkan kode pada kelas tersebut menjadi seperti ini:

Kotlin

class MainViewModel : ViewModel() { var result = 0 fun calculate(width: String, height: String, length: String) { result = width.toInt() * height.toInt() * length.toInt() } }

Java

public class MainViewModel extends ViewModel { int result = 0; void calculate(String width, String height, String length) { result = Integer.parseInt(width) * Integer.parseInt(height) * Integer.parseInt(length); } }

Setelah Anda membuat kelas MainViewModel, selanjutnya Anda perlu mengubah dan menambahkan kode pada kelas MainActivity menjadi seperti berikut:

1. Kotlin

   class MainActivity : AppCompatActivity() { private lateinit var viewModel: MainViewModel override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) viewModel = ViewModelProvider(this)[MainViewModel::class.java] displayResult() btn_calculate.setOnClickListener { val width = edt_width.text.toString() val height = edt_height.text.toString() val length = edt_length.text.toString() when { width.isEmpty() -> { edt_width.error = "Masih kosong" } height.isEmpty() -> { edt_height.error = "Masih kosong" } length.isEmpty() -> { edt_length.error = "Masih kosong" } else -> { viewModel.calculate(width, height, length) displayResult() } } } } private fun displayResult() { tv_result.text = viewModel.result.toString() } }

   Java

   public class MainActivity extends AppCompatActivity { private EditText edtWidth, edtHeight, edtLength; private TextView tvResult; private MainViewModel viewModel; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); edtWidth = findViewById(R.id.edt_width); edtHeight = findViewById(R.id.edt_height); edtLength = findViewById(R.id.edt_length); tvResult = findViewById(R.id.tv_result); viewModel = new ViewModelProvider(this).get(MainViewModel.class); displayResult(); findViewById(R.id.btn_calculate).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String width = edtWidth.getText().toString(); String height = edtHeight.getText().toString(); String length = edtLength.getText().toString(); if (width.isEmpty()) { edtWidth.setError("Masih kosong"); } else if (height.isEmpty()) { edtHeight.setError("Masih kosong"); } else if (length.isEmpty()) { edtLength.setError("Masih kosong"); } else { viewModel.calculate(width, height, length); displayResult(); } } }); } private void displayResult() { tvResult.setText(String.valueOf(viewModel.result)); } }

2. Jalankan aplikasi yang sudah Anda buat dan lakukan perubahan rotasi dari landscape ke portrait atau sebaliknya, maka aplikasi akan mempertahankan data pada kelas MainViewModel.
   
   Dengan memanfaatkan ViewModel, Anda bisa mempertahankan data sesuai kebutuhan Anda.

Bedah Kode

Library ViewModel

Saat Anda akan menggunakan komponen ViewModel, Anda perlu menambahkan satu library berikut untuk memenuhi kebutuhan tersebut.

implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0-rc02'

Library di atas juga sudah termasuk LiveData dan Lifecycle.

MainViewModel

Anda bisa melihat kode pada kelas MainViewModel di bawah ini:

Kotlin

class MainViewModel : ViewModel() { var result = 0 fun calculate(width: String, height: String, length: String) { result = width.toInt() * height.toInt() * length.toInt() } }

Java

class MainViewModel extends ViewModel { int result = 0; void calculate(String width, String height, String length){ result = Integer.parseInt(width) * Integer.parseInt(height) * Integer.parseInt(length); } }

Dengan menambahkan turunan kelas ViewModel ke kelas MainViewModel, itu menandakan bahwa kelas tersebut menjadi kelas ViewModel. 

Segala sesuatu yang ada di kelas tersebut akan terjaga selama Activity masih dalam keadaan aktif. Pada kelas MainViewModel, nilai dari result akan selalu dipertahankan selama MainViewModel masih terikat dengan Activity.

ViewModelProvider

Lalu bagaimana cara menyambungkan kelas MainViewModel dengan MainActivity? Anda bisa lihat kode di bawah ini:

Kotlin

viewModel = ViewModelProvider(this)[MainViewModel::class.java]

Java

viewModel = new ViewModelProvider(this).get(MainViewModel.class);

Ketika Activity membutuhkan ViewModel, Anda cukup memanggil kelas ViewModelProvider dengan parameter context. Karena inisialisasi dilakukan di Activity, maka kita menggunakan this sebagai context. 

Kemudian input .get() diisi dengan kelas ViewModel mana yang akan dihubungkan dengan Activity.

Mendapatkan Value dari ViewModel

Jika pada kelas ViewModel, sudah ada metode calculate yang berfungsi untuk melakukan perkalian dari input lebar, panjang dan tinggi. Maka Anda cukup memanggil metode tersebut seperti ini:

Kotlin

viewModel.calculate(width, height, length)

Java

viewModel.calculate(width, height, length);

Untuk mendapatkan result, cukup dengan:

Kotlin

viewModel.result

Java

viewModel.result

Namun jika Anda perhatikan, setiap perubahan dari result tidak bisa secara otomatis terganti. Anda perlu memanggil metode displayResult() untuk memperbarui nilai result. 

Hal ini karena Anda belum menggunakan LiveData yang bisa otomatis memperbarui teks ketika ada perubahan data. Tenang saja, Anda akan mempelajari tentang ini di latihan selanjutnya.

Anda bisa unduh proyek di atas pada tautan berikut:
Source Code Latihan MyViewModel

ViewModel merupakan bagian kecil dari Architecture Component. Akan ada beberapa komponen lain, seperti LiveData dan Room. Komponen lain tersebut akan Anda pelajari pada materi selanjutnya.