Dalam pengembangan aplikasi Android, salah satu teknik yang sering digunakan adalah pemisahan antarmuka menjadi beberapa bagian yang disebut Fragment. Fragment memungkinkan kita untuk membangun antarmuka pengguna (UI) yang lebih dinamis dan modular. Ketika kita menggunakan beberapa fragment dalam satu activity dan memerlukan berbagi data antar fragment, salah satu cara terbaik adalah dengan menggunakan SharedViewModel.
Pada tutorial ini, kita akan membuat aplikasi sederhana dengan tema Pemilihan Bupati, di mana pengguna dapat memilih calon bupati pada satu fragment, dan hasil pilihan akan ditampilkan pada fragment lain menggunakan SharedViewModel. Konsep ini bisa diterapkan dalam berbagai skenario pengembangan aplikasi berbasis data.
Apa Itu SharedViewModel?
SharedViewModel adalah konsep di mana satu ViewModel digunakan bersama oleh beberapa Fragment atau Activity dalam satu Activity yang sama. Dengan ini, data bisa dibagikan dan disinkronkan di antara komponen UI tanpa perlu terus-menerus memuat ulang atau kehilangan data akibat perubahan siklus hidup. SharedViewModel bekerja dengan cara mengikat ViewModel pada Activity, bukan pada Fragment, sehingga semua Fragment yang ada di dalam Activity tersebut dapat mengakses data yang sama.
Manfaat dari SharedViewModel meliputi:
- Pengelolaan Data yang Konsisten: Data tetap konsisten dan mudah diakses oleh beberapa Fragment tanpa perlu saling bergantung secara langsung.
- Tahan Terhadap Perubahan Siklus Hidup: Data di ViewModel tidak akan hilang saat terjadi perubahan siklus hidup (seperti rotasi layar).
- Komunikasi Antar Fragment: Fragment dapat berkomunikasi satu sama lain melalui SharedViewModel, mengurangi kebutuhan untuk menggunakan interface atau langsung bergantung pada Activity.
Langkah - langkah Pembuatan Aplikasi Android Studio Menggunakan SharedViewModel
1. Persiapakan Project
Langkah pertama, buat project baru di Android Studio:
- Buka Android Studio dan buat proyek baru.
- Pilih Empty Activity.
- Beri nama project sesuai keinginan, misalnya Fragment.
2. Menambahkan Fragment
Kita akan membuat dua fragment utama dalam aplikasi ini:
- FragmentA: Digunakan untuk memilih calon bupati.
- FragmentB: Digunakan untuk menampilkan hasil pilihan.
Membuat FragmentA
Buat fragment pertama (A) dengan cara klik kanan pada folder java, pilih New > Fragment > Fragment (Blank), dan beri nama FragmentA. Masukkan Kode dibawah ini :
package com.example.fragment;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
public class FragmentA extends Fragment {
private SharedViewModel sharedViewModel;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_a, container, false);
sharedViewModel = new ViewModelProvider(requireActivity()).get(SharedViewModel.class);
Button btnUrut1 = view.findViewById(R.id.btnUrut1);
Button btnUrut2 = view.findViewById(R.id.btnUrut2);
btnUrut1.setOnClickListener(v -> {
sharedViewModel.setSelectedItem("CRISTIANO RONALDO");
});
btnUrut2.setOnClickListener(v -> {
sharedViewModel.setSelectedItem("ISHOW SPEED");
});
return view;
}
}
Membuat FragmentB
Buat fragment kedua dengan cara yang sama, beri nama FragmentB, dan sesuaikan kode seperti di bawah ini:
package com.example.fragment;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class FragmentB extends Fragment {
private SharedViewModel sharedViewModel;
private TextView textView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_b, container, false);
textView = view.findViewById(R.id.textView);
sharedViewModel = new ViewModelProvider(requireActivity()).get(SharedViewModel.class);
sharedViewModel.getSelectedItem().observe(getViewLifecycleOwner(), item -> {
textView.setText(item);
});
return view;
}
}
3. Membuat SharedViewModel
SharedViewModel akan digunakan untuk berbagi data antara FragmentA dan FragmentB. Berikut adalah implementasinya:
package com.example.fragment;
import androidx.lifecycle.LiveData;
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;
public class SharedViewModel extends ViewModel {
private final MutableLiveData<String> selectedItem = new MutableLiveData<>();
public void setSelectedItem(String item) {
selectedItem.setValue(item);
}
public LiveData<String> getSelectedItem() {
return selectedItem;
}
}
4. Modifikasi MainActivity
Dalam MainActivity, kita akan menampilkan fragment. Berikut adalah cara untuk menampilkan FragmentA saat aplikasi pertama kali dibuka:
package com.example.fragment;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FragmentA fragmentA = new FragmentA();
getSupportFragmentManager().beginTransaction()
.replace(R.id.fragment_container_a, fragmentA)
.commit();
FragmentB fragmentB = new FragmentB();
getSupportFragmentManager().beginTransaction()
.replace(R.id.fragment_container_b, fragmentB)
.commit();
}
}
5. Layout XML
Sekarang kita akan membuat layout untuk masing-masing fragment.
Layout untuk fragment_a.xml (Fragment untuk memilih bupati):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:gravity="center"
tools:context=".FragmentA">
<Button
android:id="@+id/btnUrut1"
android:textAllCaps="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CALON BUPATI NOMOR URUT 1" />
<Button
android:id="@+id/btnUrut2"
android:textAllCaps="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CALON BUPATI NOMOR URUT 2" />
</LinearLayout>
Layout untuk fragment_b.xml (Fragment untuk menampilkan hasil pilihan):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:gravity="center"
tools:context=".FragmentB">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="@color/black"
android:orientation="vertical"
android:gravity="center"
android:text="PEMILIHAN CALON BUPATI KOTA MEGATRON"
android:textSize="18sp" />
</LinearLayout>
6. Kesimpulan
Dalam tutorial ini, kita telah membuat aplikasi pemilihan bupati sederhana menggunakan Fragment dan SharedViewModel. Aplikasi ini memungkinkan pengguna untuk memilih salah satu dari dua calon bupati, dan hasil pilihannya akan ditampilkan pada fragment yang berbeda. Dengan menggunakan SharedViewModel, kita bisa berbagi data antar fragment secara efisien tanpa bergantung pada aktivitas.
Dengan konsep ini, Anda bisa mengembangkan aplikasi pemilihan atau aplikasi serupa yang melibatkan data berbagi antar fragment. Semoga tutorial ini bermanfaat, dan selamat mencoba!
