Thursday Code : Navigation + Safe Args
Hallo semuanyaa..
Selamat datang pada serial Thursday Code. Serial ini rilis tiap hari kamis yang berisikan tentang tutorial atau pengetahuan tentang development Android dari beginner sampai advance. Kali ini Thurday Code akan membahas tentang Navigation dan Safe Args.
Definisi Navigation dan Safe Args.
Menurut dari dokumentasi Android Developer, Navigation adalah interaksi yang memungkinkan pengguna melihat-lihat, masuk, dan keluar dari berbagai konten dalam aplikasi Anda. Komponen Navigasi Android Jetpack membantu Anda menerapkan navigasi, mulai dari klik tombol sederhana hingga pola yang lebih kompleks, seperti bilah aplikasi dan panel samping navigasi. Komponen Navigasi juga memastikan pengalaman pengguna yang konsisten dan dapat diprediksi dengan mendasarkan pada serangkaian prinsip-prinsip yang telah ditetapkan. Navigation menggunakan Fragment untuk menampilkan user interface aplikasi kita. Dan Safe Args adalah metode untuk mengirimkan data pada Navigation.
Kenapa Pakai Navigation dan Safe Args
Navigation memudahkan kita untuk melihat dan menentukan alur aplikasi kita. Karena alur aplikasi yang jelas sangat berpengaruh terhadap kepuasan user dalam menggunakan aplikasi. Terlebih lagi dengan menggunakan Navigation maka kita hanya membutuhkan satu Activity saja, sisanya menggunakan Fragment. Dan Safe Args akan memudahkan kita untuk mengirimkan data antar Fragment dan menghindari kesalahan pemanggilan.
Implementasi
Kali ini kita akan membuat form sederhana untuk menampilkan nama kita.
Pertama tambahkan Navigation pada project dengan cara klik kanan pada direktori res. Pilih new android resource, beri nama untuk navigation dan jangan lupa ubah Resource type menjadi Navigation. Dan klik ok, Jika terdapat peringatan atau popup yang memberitahu gradle untuk Navigation tidak ada maka tekan ok untuk menambah gradle Navigation secara otomatis.
Tambahkan gradle untuk Safe Args pada gradle project.
buildscript { ................. dependencies {
classpath 'com.android.tools.build:gradle:3.6.3'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.2.2"
}
}
Aktifkan plugin Safe Args pada gradle module.
apply plugin: 'androidx.navigation.safeargs.kotlin'Tambahkan target compability pada gradle module karena sebagian code yang akan kita gunakan hanya bisa dipanggil pada java versi 1.8 dan data binding. Dan sync gradle kalian.
android {
..............
kotlinOptions {
jvmTarget = JavaVersion.VERSION_1_8.toString()
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
dataBinding {
enabled true
}
}Tambahkan 2 Fragment untuk form dan untuk menampilkan nama kita. Untuk artikel ini, HomeFragment untuk menampilkan form dan DetailFragment untuk menampilkan nama kita.
Tambahkan fragment tadi ke navigation yang telah kita buat tadi. Dengan buka file navigation kita pada direktori navigation pada res. Klik icon yang terdapat simbol plus warna hijau pada bagian atas editor Navigation. Pilih fragment yang ingin ditampilkan pertama karena saat menambahkan fragment pertama kali pada navigation maka akan dianggap dengan home.
Tentukan alur navigasi kita. Sesuai artikel ini maka kita hanya menyambungkan HomeFragment ke DetailFragment. Klik HomeFragment dan drag lingkaran pada sebelah kanan ke DetailFragment.
Sekarang kita menambahkan Safe Args. Untuk menambahkannya adalah klik fragment yang akan menerima data bukan yang mengirim, untuk artikel ini maka DetailFragment yang akan kita tambahkan Safe Args. Caranya klik DetailFragment, maka akan muncul menu attributes pada paling kanan editor.
Klik icon plus pada sub Arguments, karena kita akan mengirim data bertipe String maka type yang kita pilih adalah String dan untuk name kalian sesuiakan sendiri.
Sekarang kita pindah ke activity_main.xml untuk menampilkan navigation kita. Set seperti dibawah ini.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:navGraph="@navigation/main_navigation"
app:defaultNavHost="true"/>
</androidx.constraintlayout.widget.ConstraintLayout>tag fragment sebagai penampung navigation. Tapi perlu diingat, untuk android:name harus seperti itu untuk menggunakan navigation, navGraph untuk menload navigation yang telah kita buat, dan defaultNavHost untuk membuat navigation kita menjadi default navigation.
Pindah ke MainActivity.kt. variable lateinit untuk NavController yang digunakan untuk mengatur perpindahan fragment. Inisialisasi NavController dengan findNavController dan cari id fragment yang kita buat tadi sebagai penampung navigation. Dan terakhir set dengan NavigationUI.setupActionBarWithNavController.
class MainActivity : AppCompatActivity() {
private lateinit var navController : NavController
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
navController = findNavController(R.id.nav_host_fragment)
NavigationUI.setupActionBarWithNavController(this, navController)
}
}Tambahkan method onSupportNavigateUp untuk menambahkan back arrow button pada action bar android.
class MainActivity : AppCompatActivity() {
private lateinit var navController : NavController
...................
override fun onSupportNavigateUp(): Boolean {
return navController.navigateUp() || super.onSupportNavigateUp()
}
}Ubah fragment_home.xml menjadi seperti berikut atau kalian bisa berkreasi sendiri.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".HomeFragment" >
<EditText
android:id="@+id/ed_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:hint="Masukkan Nama" />
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Action" />
</LinearLayout>
</layout>Ubah HomeFragment.kt menjadi seperti ini. function check digunakan untuk mengecek input text kosong atau tidak. Sedangkan function action digunakan untuk berpindah ke DetailFragment dengan membawa hasil data dari input field.
class HomeFragment : Fragment() {
private lateinit var binding: FragmentHomeBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
binding = DataBindingUtil.inflate(layoutInflater, R.layout.fragment_home, container, false)
binding.btnAction.setOnClickListener { check() }
return binding.root
}
private fun check(){
if (binding.edNama.text.isEmpty()) Toast.makeText(requireContext(), "Nama tidak boleh kosong", Toast.LENGTH_SHORT).show()
else action()
}
private fun action(){ requireView().findNavController().navigate(HomeFragmentDirections.actionHomeFragmentToDetailFragment(binding.edNama.text.toString()))
}
}Ubah fragment_detail.xml menjadi seperti ini.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".DetailFragment"
android:padding="16dp">
<TextView
android:id="@+id/tv_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Nama"
android:textAlignment="center"/>
</LinearLayout>
</layout>Ubah DetailFragment.kt menjadi seperti dibawah ini. DetailFragmentArgs merupakan argument atau safe args. Untuk memanggilnya tinggal nama variable DetailFragmentArgs dan panggil nama safe args yang dibuat pada navigation editor ( args.nama ).
class DetailFragment : Fragment() {
private val args : DetailFragmentArgs by navArgs()
private lateinit var binding: FragmentDetailBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
binding = DataBindingUtil.inflate(layoutInflater, R.layout.fragment_detail, container, false)
binding.tvNama.text = "Selamat datang, ${args.nama}"
return binding.root
}
}Dan untuk mengganti judul pada action bar tiap fragment bisa melalui dengan cara buka navigation yang kita pakai, klik fragment yang akan diganti judul action barnya, pada menu attributes terdapat label. Label tersebutlah text yang akan ditampilkan sebagai judul action bar yang bisa kalian ganti sesuka hati.
Setelah itu coba jalankan project kalian. Jika terjadi error maka cek ulang apakah tag layout fragment beserta android:name-nya atau coba cek proses perpindahan fragment beserta argument pada penerima.
Untuk project artikel ini bisa kalian lihat pada link github dibawah ini.
Sekian dari Thurday Code kali ini dengan tema Navigation dan Safe Args pada Android. Pantengin terus hari kamis pada Medium kami Chevalier Lab atau media sosial kami untuk update selanjutnya. Dan jangan lupa kritik dan saran buat Thurday Code agar semakin baik lagi. Sekian dari saya, Terima kasih.
Have a Nice Day !!!
