LABORATORIUM PEMBELAJARAN ILMU KOMPUTER

FAKULTAS ILMU KOMPUTER

UNIVERSITAS BRAWIJAYA
BAB : VIEWMODEL DAN LIVEDATA
NAMA : MUHAMMAD ALI NAUFAL MULYADI
NIM : 195150207111073
TANGGAL : 28/10/2021
ASISTEN : - ANGEL ANGGINA NASUTION
- MUHAMMAD SYUKRAN NI'MATULLAH

TUGAS 1
A. Soal
Buatlah implementasi dari ViewModel dan LiveData berupa aplikasi android
yang dapat menerima masukan data mahasiswa berupa nama, nim, dan kelas.

B. Source Code
MainActivity.kt
1 package com.example.bab5psi
2
3 import androidx.appcompat.app.AppCompatActivity
4 import android.os.Bundle
5 import android.widget.Button
6 import android.widget.TextView
7 import
androidx.recyclerview.widget.LinearLayoutManager
8 import androidx.recyclerview.widget.RecyclerView
9
10 class MainActivity : AppCompatActivity() {
11 override fun onCreate(savedInstanceState:
Bundle?) {
12 super.onCreate(savedInstanceState)
13 setContentView(R.layout.activity_main)
14
15 val vm = ViewModel(List())
16 val adp = Adapter(vm.getList())
17 val rv =
findViewById<RecyclerView>(R.id.daftar)
18 rv.adapter = adp
19 rv.layoutManager =
LinearLayoutManager(this)
20
21 findViewById<Button>(R.id.simpan).setOnClickListene
22 r{
val nama =
23 findViewById<TextView>(R.id.nama_mahasiswa).text.to
String()
val nim =
24 findViewById<TextView>(R.id.nim_mahasiswa).text.toS
tring()
val kelas =
25 findViewById<TextView>(R.id.kelas_mahasiswa).text.t
oString()
vm.addList(Model(nama, nim, kelas))
26 rv.adapter = adp
27 rv.layoutManager =
LinearLayoutManager(this)
28 }
29 }
30 }

Adapter.kt
1 package com.example.bab5psi
2
3 import android.view.LayoutInflater
4 import android.view.View
5 import android.view.ViewGroup
6 import android.widget.TextView
7 import androidx.lifecycle.LiveData
8 import androidx.recyclerview.widget.RecyclerView
9 import kotlin.collections.List
10
11 class Adapter (val liveData:
LiveData<List<Model>>):
12 RecyclerView.Adapter<Adapter.TodoViewHolder>(){
13 inner class TodoViewHolder(items: View) :
14 RecyclerView.ViewHolder(items)
15
override fun onCreateViewHolder(parent:
ViewGroup, viewType: Int): TodoViewHolder {
16 val view =
LayoutInflater.from(parent.context).inflate(R.layou
t.list_activity, parent, false)
17 return TodoViewHolder(view)
18 }
19
20 override fun onBindViewHolder(holder:
21 TodoViewHolder, position: Int) {
holder.itemView.apply{
22 val nama =
23 findViewById<TextView>(R.id.nama)
val nim =
24 findViewById<TextView>(R.id.nim)
val kelas =
25 findViewById<TextView>(R.id.kelas)
nama.text =
26 liveData.value?.get(position)?.name?:""
nim.text =
27 liveData.value?.get(position)?.nim?:""
kelas.text =
28 liveData.value?.get(position)?.kelas?:""
29 }
30 }
31
32 override fun getItemCount(): Int {
33 return liveData.value?.size?:0
34 }
35 }

Model.kt
1 package com.example.bab5psi
2
3 class Model (var name : String, var nim : String,
var kelas : String){
4 }

ViewModel.kt
1 package com.example.bab5psi
2
3 import androidx.lifecycle.LiveData
4 import androidx.lifecycle.MutableLiveData
5 import androidx.lifecycle.ViewModel
6 import kotlin.collections.List
7
8 class ViewModel (val viewModel :
com.example.bab5psi.List) : ViewModel(){
9 var data = MutableLiveData<List<Model>>()
10 fun getList() : LiveData<List<Model>> {
11 data.value = viewModel.getList()
12 return data
13 }
14 fun addList (newList: Model){
15 viewModel.addList(newList)
16 data.value = viewModel.getList()
17 }
18 }

List.kt
1 package com.example.bab5psi
2
3 class List {
4 private val daftarMahasiswa =
mutableListOf<Model>()
5 init {
6 daftarMahasiswa.add(Model("Ali",
"195150207111073", "PSI-E"))
7 daftarMahasiswa.add(Model("Ari",
"195150201111007","PSI-E"))
8 daftarMahasiswa.add(Model("Fachry",
"195150201111070", "PSI-E"))
9 }
10 fun getList() = daftarMahasiswa
11 fun addList(newList : Model) {
12 daftarMahasiswa.add(newList)
13 }
14 }

activity_main.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/
 android"
3 xmlns:app="http://schemas.android.com/apk/res-
auto"
4 xmlns:tools="http://schemas.android.com/tools"
5 android:layout_width="match_parent"
6 android:layout_height="wrap_content"
7 tools:context=".MainActivity">
8
9 <LinearLayout
10 android:id="@+id/linearLayout"
11 android:layout_width="match_parent"
12 android:layout_height="wrap_content"
13 android:layout_marginTop="5dp"
14 android:orientation="vertical"
15 app:layout_constraintEnd_toEndOf="parent"
16 app:layout_constraintStart_toStartOf="parent"
17 app:layout_constraintTop_toTopOf="parent"
18 android:padding="10dp"
19 android:gravity="center">
20
21 <TextView
22 android:id="@+id/data_mahasiswa"
23 android:layout_width="match_parent"
24 android:layout_height="wrap_content"
25 android:text="DATA MAHASISWA"
26 android:textAlignment="center"
27 android:textColor="@color/black"
28 android:textSize="22sp"
29 android:textStyle="bold"
30 app:layout_constraintStart_toStartOf="parent"
31 app:layout_constraintTop_toTopOf="parent" />
32
33 <LinearLayout
34 android:layout_width="match_parent"
35 android:layout_height="wrap_content"
36 android:layout_marginTop="10dp"
37 android:orientation="horizontal">
38
39 <TextView
40 android:layout_width="80dp"
41 android:layout_height="wrap_content"
42 android:text="Nama"
43 android:textColor="@color/black"
44 android:textSize="18sp" />
45
46 <EditText
47 android:id="@+id/nama_mahasiswa"
48 android:layout_width="match_parent"
49 android:layout_height="wrap_content"
50 android:hint="Nama" />
51
52 </LinearLayout>
53
54 <LinearLayout
55 android:layout_width="match_parent"
56 android:layout_height="wrap_content"
57 android:layout_marginTop="5dp"
58 android:orientation="horizontal">
59
60 <TextView
61 android:layout_width="80dp"
62 android:layout_height="wrap_content"
63 android:text="NIM"
64 android:textColor="@color/black"
65 android:textSize="18sp"/>
66
67 <EditText
68 android:id="@+id/nim_mahasiswa"
69 android:layout_width="match_parent"
70 android:layout_height="wrap_content"
71 android:hint="NIM" />
72
73 </LinearLayout>
74
75 <LinearLayout
76 android:layout_width="match_parent"
77 android:layout_height="wrap_content"
78 android:layout_marginTop="5dp"
79 android:orientation="horizontal">
80
81 <TextView
82 android:layout_width="80dp"
83 android:layout_height="wrap_content"
84 android:text="Kelas"
85 android:textColor="@color/black"
86 android:textSize="18sp"/>
87
88 <EditText
89 android:id="@+id/kelas_mahasiswa"
90 android:layout_width="match_parent"
91 android:layout_height="wrap_content"
92 android:hint="Kelas" />
93 </LinearLayout>
94
95 <Button
96 android:id="@+id/simpan"
97 android:layout_width="wrap_content"
98 android:layout_height="wrap_content"
99 android:layout_marginTop="5dp"
100 android:backgroundTint="#03A9F4"
101 android:text="Simpan data" />
102 </LinearLayout>
103
104 <TextView
105 android:id="@+id/mahasiswa"
106 android:layout_width="match_parent"
107 android:layout_height="wrap_content"
108 android:layout_marginTop="20dp"
109 android:text="DAFTAR MAHASISWA"
110 android:textAlignment="center"
111 android:textColor="@color/black"
112 android:textSize="22sp"
113 android:textStyle="bold"
114
115 app:layout_constraintTop_toBottomOf="@+id/linearLa
yout"
116 tools:layout_editor_absoluteX="0dp" />
117 <androidx.recyclerview.widget.RecyclerView
118 android:id="@+id/daftar"
119 android:layout_width="match_parent"
120 android:layout_height="wrap_content"
121 app:layout_constraintTop_toBottomOf="@+id/mahasisw
a">
122 </androidx.recyclerview.widget.RecyclerView>
123 </androidx.constraintlayout.widget.ConstraintLayou
t>

list_activity.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <androidx.constraintlayout.widget.ConstraintLayout
3 xmlns:android="http://schemas.android.com/apk/res/a
ndroid"
4 xmlns:app="http://schemas.android.com/apk/res-
auto"
5 android:layout_width="match_parent"
6 android:layout_height="wrap_content">
7
8 <LinearLayout
9 android:layout_width="match_parent"
10 android:layout_height="wrap_content"
11 android:orientation="vertical"
12 android:padding="10dp"
13 app:layout_constraintEnd_toEndOf="parent"
14 app:layout_constraintStart_toStartOf="parent"
15 app:layout_constraintTop_toTopOf="parent">
16
17 <LinearLayout
18 android:layout_width="match_parent"
19 android:layout_height="wrap_content"
20 android:orientation="horizontal">
21
22 <TextView
23 android:layout_width="80dp"
24 android:layout_height="wrap_content"
25 android:text="Nama"
26 android:textColor="@color/black"
27 android:textSize="18sp" />
28
29 <EditText
30 android:id="@+id/nama"
31 android:layout_width="match_parent"
32 android:layout_height="wrap_content"
33 android:hint="Nama" />
34
35 </LinearLayout>
36
37 <LinearLayout
38 android:layout_width="match_parent"
39 android:layout_height="wrap_content"
40 android:layout_marginTop="5dp"
41 android:orientation="horizontal">
42
43 <TextView
 44 android:layout_width="80dp"
45 android:layout_height="wrap_content"
46 android:text="NIM"
47 android:textColor="@color/black"
48 android:textSize="18sp"/>
49
50 <EditText
51 android:id="@+id/nim"
52 android:layout_width="match_parent"
53 android:layout_height="wrap_content"
54 android:hint="NIM" />
55
56 </LinearLayout>
57
58 <LinearLayout
59 android:layout_width="match_parent"
60 android:layout_height="wrap_content"
61 android:layout_marginTop="5dp"
62 android:orientation="horizontal">
63
64 <TextView
65 android:layout_width="80dp"
66 android:layout_height="wrap_content"
67 android:text="Kelas"
68 android:textColor="@color/black"
69 android:textSize="18sp"/>
70
71 <EditText
72 android:id="@+id/kelas"
73 android:layout_width="match_parent"
74 android:layout_height="wrap_content"
75 android:hint="Kelas" />
76 </LinearLayout>
77
78 </LinearLayout>
79 </androidx.constraintlayout.widget.ConstraintLayout
>

C. Screenshot
Sebelum Menambahkan Data:
 Sesudah Menambahkan Data:

D. Penjelasan
Pada praktikum kali ini kita mengimplementasikan ViewModel dan
LiveData dalam RecycleView. Terdapat beberapa file activity untuk
menerapkan ViewModel dan LiveData tersebut dan memerlukan Adapter
dimana Adapter berfungsi agar komponen dalam list_activity ditampilkan pada
MainActivity secara berulang kali namun dengan data yang berbeda oleh
karena itu memerlukan RecycleView pada activity_main agar data dapat
ditampilkan berulang kali. Ada pun file List dimana berisi data mahasiswa
secara default, sehingga saat pertama kali di-run data sudah ditampilkan.
ViewModel bertujuan menyimpan data serta menampilkan data dan LiveData
bertujuan agar data dapat ditambahkan, seperti nama, nim, dan kelas.