Android Navigation Library - Basic

Yoesuv 13.25 Android Tidak ada komentar

Salah satu library yang terbaru dari Android Jetpack adalah Navigation Library. library ini mempermudah dalam mengembangkan aplikasi dengan model single activity.

untuk contoh dasarnya seperti berikut. pada fragment pertama jika di klik menuju ke fragment kedua. contoh apknya download disini.

dan contoh navigation graphnya nanti akan seperti berikut ini.

langsung ke pembuatannya. silahkan buat project android baru. dan langsung tambahkan resource untuk navigation. caranya klik kanan pada res -> new -> Android Resource File. jangan lupa ganti Resource type nya ke Navigation.

maka otomatis android studio akan membuat folder resources untuk navigation.

dan juga menambahkan library untuk navigation.

langkah pertama selesai. sekarang lanjut ke main activity. Main Activity ini akan bertindak sebagai host untuk dua fragment (lihat contoh gambar paling atas pada post ini). rubah xmlnya seperti berikut.
perhatikan pada bagian tag fragment. dan juga karena menggunakan toolbar sendiri maka ganti tema di file styles.xml ubah parentnya menjadi Theme.AppCompat.Light.NoActionBar.

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout
	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="com.yoesuv.mynavigation.MainActivity">

	<androidx.appcompat.widget.Toolbar
	android:id="@+id/toolbarMain"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="@color/colorPrimary"
	android:theme="@style/ToolbarTheme"/>

	<fragment
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:id="@+id/fragmentMain"
	android:label="@string/fragment_main"
	android:name="androidx.navigation.fragment.NavHostFragment"
	app:navGraph="@navigation/nav_graph"
	app:defaultNavHost="true"
	tools:layout="@layout/first_fragment"/>

	</RelativeLayout>

view raw activity_main.xml hosted with ❤ by GitHub

sedangkan untuk class nya seperti berikut. ada function setupNavigation() karena menggunakan toolbar sendiri. kemudian juga perlu mengatur Navigation, agar toolbar terdapat tanda back.

	package com.yoesuv.mynavigation

	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import androidx.navigation.Navigation
	import androidx.navigation.ui.NavigationUI
	import androidx.navigation.ui.setupActionBarWithNavController
	import kotlinx.android.synthetic.main.activity_main.*

	class MainActivity : AppCompatActivity() {

	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)
	setSupportActionBar(toolbarMain)
	setupNavigation()
	}

	private fun setupNavigation() {
	val navController = Navigation.findNavController(this, R.id.fragmentMain)
	setupActionBarWithNavController( navController)
	NavigationUI.setupWithNavController(toolbarMain, navController)
	}

	override fun onSupportNavigateUp(): Boolean {
	return Navigation.findNavController(this, R.id.fragmentMain).navigateUp()
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Sekarang lanjut ke fragment pertama. buat layout xml standar dengan sebuah button untuk menuju fragment kedua.

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent">

	<Button
	android:id="@+id/buttonFirstFragment"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerInParent="true"
	android:text="@string/button_first_fragment"/>

	</RelativeLayout>

view raw first_fragment.xml hosted with ❤ by GitHub

sedangkan untuk class fragment pertama seperti berikut. bisa dilewati dulu untuk action button clicknya karena belum membuat navigation action.

	package com.yoesuv.mynavigation

	import android.os.Bundle
	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	import androidx.fragment.app.Fragment
	import androidx.navigation.findNavController
	import kotlinx.android.synthetic.main.first_fragment.view.*

	class FirstFragment : Fragment(){
	override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
	return inflater.inflate(R.layout.first_fragment, container, false)
	}

	override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
	super.onViewCreated(view, savedInstanceState)
	view.buttonFirstFragment.setOnClickListener {
	it.findNavController().navigate(R.id.action_to_fragment_second)
	}
	}
	}

view raw FirstFragment.kt hosted with ❤ by GitHub

untuk fragment kedua juga sama. tinggal ganti saja id dan stringnya.

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent">

	<Button
	android:id="@+id/buttonSecondFragment"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerInParent="true"
	android:text="@string/button_second_fragment"/>

	</RelativeLayout>

view raw second_fragment.xml hosted with ❤ by GitHub

untuk class fragment kedua lebih mudah. karena hanya button mengatur action back saja.

	package com.yoesuv.mynavigation

	import android.os.Bundle
	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	import androidx.fragment.app.Fragment
	import kotlinx.android.synthetic.main.second_fragment.view.*

	class SecondFragment: Fragment() {

	override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
	return inflater.inflate(R.layout.second_fragment, container, false)
	}

	override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
	super.onViewCreated(view, savedInstanceState)
	view.buttonSecondFragment.setOnClickListener {
	activity?.onBackPressed()
	}
	}

	}

view raw SecondFragment.kt hosted with ❤ by GitHub

oke semuanya siap, sekarang bagian paling penting yaitu mengatur navigationnya melalui xml. perhatikan pada fragment pertama, terdapat action dengan id dan destination. id action inilah yang akan dipanggil pada button click fragment pertama.

	<?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/nav_graph"
	app:startDestination="@id/fragmentFirst">

	<fragment
	android:id="@+id/fragmentFirst"
	android:name="com.yoesuv.mynavigation.FirstFragment"
	android:label="@string/fragment_first"
	tools:layout="@layout/first_fragment">
	<action android:id="@+id/action_to_fragment_second"
	app:destination="@id/fragmentSecond"/>
	</fragment>

	<fragment
	android:id="@+id/fragmentSecond"
	android:name="com.yoesuv.mynavigation.SecondFragment"
	android:label="@string/fragment_second"
	tools:layout="@layout/second_fragment" />

	</navigation>

view raw nav_graph.xml hosted with ❤ by GitHub

sekarang tinggal dijalankan. jika benar maka aplikasi akan seperti contoh apk aplikasi di atas. dengan model single activity.

Selamat Mencoba.
Lihat repository githubnya disini.