UDACODING

Posts

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 :

1 Cara Menggunakan Navigation Jetpack pada Kotlin

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)

1-1-1024x587 Cara Menggunakan Navigation Jetpack pada Kotlin

Lalu kita buat seperti ini, hilangkan centang include fragment, dan interface.

2 Cara Menggunakan Navigation Jetpack pada Kotlin

Buat juga SecondFragment, dan ResultFragment dengan cara yang sama seperti diatas, maka hasilnya akan seperti berikut :

image-70 Cara Menggunakan Navigation Jetpack pada Kotlin

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

image-72 Cara Menggunakan Navigation Jetpack pada Kotlin

lalu kita buat seperti berikut, dan klik OK :

image-73 Cara Menggunakan Navigation Jetpack pada Kotlin

Jika sudah dibuat, kita tambahkan fragment yang sebelumnya telah dibuat ke dalam nav_graph.xml dengan cara seperti berikut :

image-74 Cara Menggunakan Navigation Jetpack pada Kotlin

double klik pada fragment_main, dan lakukan hal yang sama pada fragment_result, fragment_second, sehingga akan menghasilkan tampilan seperti berikut :

image-75 Cara Menggunakan Navigation Jetpack pada Kotlin

lalu kita hubungkan fragmentnya dengan menariknya seperti berikut :

image-76 Cara Menggunakan Navigation Jetpack pada Kotlin

sampai seperti berikut :

image-77 Cara Menggunakan Navigation Jetpack pada Kotlin

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 :

image-78-1024x584 Cara Menggunakan Navigation Jetpack pada Kotlin

Leave a Reply :

* Your email address will not be published.