Cara Menggunakan Navigation Jetpack pada Kotlin
Bismillah, biasanya untuk berpindah dari satu Activity ke Activity yang lain, kita menggunakan Intent.
Namun kali ini kita akan menggunakan sebuah library untuk memudahkannya, yaitu Navigation
Poin Prinisp
Pada project ini, kita hanya menggunkan 1 buah Activity yang fungsinya sebagai penampung utama halaman-halaman lain yang berupa fragment, ini disebut dengan NavHost
Untuk pindah dari sebuah fragment ke fragment lainnya kita bisa mengaturnya dengan mudah menggunakan NavGraph
Persiapan
Buat sebuah project baru seperti berikut :
Membuat Fragment
Selanjutnya kita akan membuat 3 buah fragment, yaitu Main Fragment, Second Fragment, dan Result Fragment
Caranya yaitu
1. Klik kanan > New > Fragment > Fragment (Blank)
Lalu kita buat seperti ini, hilangkan centang include fragment, dan interface.
Buat juga SecondFragment, dan ResultFragment dengan cara yang sama seperti diatas, maka hasilnya akan seperti berikut :
Sekarang kita telah membuat halaman-halamannya
Fungsi masing-masing halaman
- MainActivity hanya sebagai NavHost
- MainFragment akan digunakan sebagai HomePage
- SecondFragment akan ada sebuah EditText
- ResultFragment akan menampilkan hasil dari EditText SecondFragment
Menambahkan Dependency
Selanjutnya kita tambahkan dependensinya pada build.gradle, lalu sync :
def nav_version = "2.2.0"
// Kotlin
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
Langkah Inti
1. Menambahkan NavHost
activity_main.xml kita tambahkan navhostnya seperti berikut :
<?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="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
2. Mengatur Layout
fragment_main.xml buat sebuah tombol seperti berikut :
<?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=".MainFragment">
<Button
android:id="@+id/btnAction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="button"/>
</RelativeLayout>
fragment_second.xml kita tambahkan EditText dan Button :
<?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=".SecondFragment">
<EditText
android:id="@+id/edInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:hint="Input"/>
<Button
android:id="@+id/btnSubmit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_below="@+id/edInput"/>
</RelativeLayout>
fragment_result kita buat 1 buah TextView seperti berikut :
<?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=".ResultFragment">
<TextView
android:id="@+id/txtResult"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Hasil" />
</RelativeLayout>
3. Membuat NavGraph
pada res klik Kanan > New > Android Resource file
lalu kita buat seperti berikut, dan klik OK :
Jika sudah dibuat, kita tambahkan fragment yang sebelumnya telah dibuat ke dalam nav_graph.xml dengan cara seperti berikut :
double klik pada fragment_main, dan lakukan hal yang sama pada fragment_result, fragment_second, sehingga akan menghasilkan tampilan seperti berikut :
lalu kita hubungkan fragmentnya dengan menariknya seperti berikut :
sampai seperti berikut :
4. Menambahkan Kode untuk pindah
Untuk pindah dari halaman MainFragment ke SecondFragment, kita edit MainFragmentnya menjadi seperti berikut :
package id.rdev.navigationjetpack
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.navigation.NavController
import androidx.navigation.Navigation
import kotlinx.android.synthetic.main.fragment_main.*
class MainFragment : Fragment() {
lateinit var nav : NavController
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_main, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
nav = Navigation.findNavController(view)
btnAction.setOnClickListener {
// // idnya bisa dilihat pada mode Text nav_graph.xml
nav.navigate(R.id.action_mainFragment_to_secondFragment)
}
}
}
Lalu pada SecondFragment, kita buat seperti berikut :
package id.rdev.navigationjetpack
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.navigation.NavController
import androidx.navigation.Navigation
import kotlinx.android.synthetic.main.fragment_second.*
/**
* A simple [Fragment] subclass.
*/
class SecondFragment : Fragment() {
lateinit var nav: NavController
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_second, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
nav = Navigation.findNavController(view)
btnSubmit.setOnClickListener {
// exitAnim = waktu pindah ke fragment tujuan
// enterAnim = waktu sampai di fragment tujuan
// popupExitAnim = waktu back dari fragment
// popupEnterAnim = waktu sampai di fragment sebelumnya
//pengecekan dari input user
if (edInput.text.toString().isNotEmpty()) {
//kalau ngk kosong
val input = edInput.text.toString()
val bundle = Bundle()
bundle.putString("args", input)
nav.navigate(R.id.action_secondFragment_to_resultFragment,bundle)
}
}
}
}
Terakhir pada ResultFragment kita tampilkan hasil input dari SecondFragment seperti berikut :
package id.rdev.navigationjetpack
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import kotlinx.android.synthetic.main.fragment_result.*
/**
* A simple [Fragment] subclass.
*/
class ResultFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_result, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val hasilTangkap = arguments?.getString("args")
txtResult.text = hasilTangkap
}
}
Hasilnya :