Android Navigation Component merupakan sebuah arsitektur baru yang di perkenalan pada Google I/O tahun lalu, arsitektur ini membantu kita dalam penerapan Single Activity, bagi teman teman yang belum tahu secara sederhana single activity merupakan sebuah konsep dimana kita hanya membuat satu buah activity di dalam aplikasi kita, kemudian semua tampilan UI akan di letak kan pada fragment fragment.

Pada case sederhana kita berpindah daru satu fragment ke fragment lain menggunakan fragment transaction, namun dalam case yang lebih komplek kita akan kesulitan dalam menghadle backstack dari fragment fragment tersebuh, sehingga di ciptakan lah Navigation Component yang akan memudahkan kita dalam menanganan ini.

Beberapa keuntungan menggunakan Navigation Component :

• Hadle backstack lebih mudah
• Menggunakan Automated Transaction
• Pengaturan animasi transaksi lebih mudah
• Pengiriman argument lebih mudah
• Deeplink jauh lebih mudah diterapkan

Untuk info lebih lanjut mengenai navigation component dapat teman teman baca di official android developer Android Navigation Componen.

 

Hal pertama yang harus dilakukan sebelum menerapkan Navigation componen adalah menambah dependencies berikut ini di dalam gradle kita

implementation 'android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha01'
implementation 'android.arch.navigation:navigation-ui-ktx:1.0.0-alpha01'

Membuat Navigation Graph

Setelah menambahkan dependenci kita harus membuat navigation graph dengan cara klik kanan pada folder res kemudian pilih new -> resource file dan pada resource type pilih navigation

Setelah itu kita buat 2 buah fragment untuk belajar bagaimana navigation component ini bekerja, dalam hal ini kita buat sebuah fragment sederhana yang nantinya akan menjadi splashscreen dan menu utama.

Pada Activity utama kita menset activity tersebut menjadi host yang akan menampung fragment fragment kita,

<?xml version='1.0' encoding='utf-8'?>
<android.support.constraint.ConstraintLayout
        xmlns:android='http://schemas.android.com/apk/res/android'
        xmlns:tools='http://schemas.android.com/tools'
        xmlns:app='http://schemas.android.com/apk/res-auto'
        android:layout_width='match_parent'
        android:layout_height='match_parent'
        tools:context='.view.ui.MainActivity'>

    <fragment
            android:id='@+id/mainNavigationFragment'
            android:name='androidx.navigation.fragment.NavHostFragment'
            android:layout_width='0dp'
            android:layout_height='0dp'
            app:defaultNavHost='true'
            app:layout_constraintBottom_toBottomOf='parent'
            app:layout_constraintEnd_toEndOf='parent'
            app:layout_constraintStart_toStartOf='parent'
            app:layout_constraintTop_toTopOf='parent'
            app:navGraph='@navigation/navigation' />
</android.support.constraint.ConstraintLayout>

Pada kode diatas ada dua hal yang harus di perhatikan 

app:defaultNavHost='true'

Kode di atas digunakan untuk menset activity ini sebagai host yang menampung fragment yang kita buat

app:navGraph='@navigation/navigation' 

Kode diatas digunakan untuk mengatur file navigaiton Graph mana yang akan menangani fragment fragment kita.

Jika sudah sekarang kita akan mengatur perpindah dari setiap fragment yang kita buat pada file navigation.

Pertama kita tambahkan destination awal dari navigation klik pada tombol add destination lalu pilih fragmentSplashScreen, kemudian tambahkan lagi fragmentMain, setalah itu kita tinggal menarik garis dari splashscreen menuju mainActivity, cukup mudah bukan.

<?xml version='1.0' encoding='utf-8'?>
<navigation 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:id='@+id/navigation'
            app:startDestination='@id/splashScreenFragment2'>

    <fragment android:id='@+id/splashScreenFragment2'
              android:name='id.kampung.pelaporankemiskinan.view.ui.fragment.SplashScreenFragment'
              android:label='fragment_splash_screen' tools:layout='@layout/fragment_splash_screen'>
        <action android:id='@+id/action_splashScreenFragment2_to_mainFragment2' app:destination='@id/mainFragment2'/>
    </fragment>
    <fragment android:id='@+id/mainFragment2'
              android:name='id.kampung.pelaporankemiskinan.view.ui.fragment.MainFragment' android:label='fragment_main'
              tools:layout='@layout/fragment_main'/>
</navigation>

  Pada kode xml di atas teman teman dapa mencermati terdapat section action, action yang akan kita panggil nantinya untuk melakukan perpindahan.

Untuk memanggilnya kita menggunakan fungsi 

findNavController().navigate('id action yang kita set di navigation)

sehingga pada file SplashScreenFragment.kt kurang lebih menjadi seperti berikut

class SplashScreenFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_splash_screen, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        Handler().postDelayed(
            {
                context?.let {
                    findNavController().navigate(R.id.action_splashScreenFragment_to_mainFragment)
                }
            },2000
        )
    }

    override fun onResume() {
        super.onResume()
        (activity as AppCompatActivity).supportActionBar!!.hide()
    }

    override fun onStop() {
        super.onStop()
        (activity as AppCompatActivity).supportActionBar!!.show()
    }
}

Kemudian run projek kita untuk melihat bagaimana navigation component bekerja.

Sekitan untuk tutorial kalian semoga bisa dipahami hehehehe.

Salam Rack Edan Rack Spiro.