Navigasi pada Aplikasi Android Modular dengan Jetpack Navigation Component
Hai..baraya satu perjuangan buruh ketik pada android studio wkwkwk
lama tak berjumpa ya…maaf lagi sibuk memerangi imposter syndrome yang muncul terus dalam diri wkwk jadi insecure tiap hari haha
yaudah lupakan masalah imposter syndrome, sekarang mah gaskeun ngoding bor, pada tulisan kali ini saya ingin share salah satu komponen penting dalam pengembangan aplikasi android, yup betul sebuah navigasi :D.
gimana ceritanya kalo aplikasi gada navigasi wkwkwk, tapi kali ini saya akan coba share navigasi yang tidak biasa gan, saya akan share bagaimana berpindah atau bernavigasi dari satu hati ke lain hati…eh lintas modul ke modul lainya maksudnya maaf terlalu bersemangat :D
sebelum lanjut kita harus satukan persepsi, satukan pemahaman, satukan jiwa dan satukan hati dulu apa itu aplikasi modular baraya.
teman-teman pasti sudah tidak asing dengan pengembangan monolith pada aplikasi android, wait apa lagi monolith ?
jadi gini pengembangan aplikasi itu ada dua macam satau monolith yang biasa agan-agan lakukan ketika buat project, dalam android project terdapat satu modul App kan ? bener ga?
sedangkan pada modular aplikasi itu sistemnya kita memecah-mecah per feature dengan sistem satu modul satu feature contoh baraya
terdapat module second_feature disitu nah itu anggap saja part feature yang di miliki si modul utama yaitu si app, sudah jelaskan perbedaan nya
Hal tersebut dilakukan karena monolith mempunyai kekurangan ketika aplikasinya sudah segede gaban wkwk kaya Gojek,Tokopedia dll bakal pusing nyari feature-feature tertentu, apalagi ketika developernya sudah banyak, pabuis ceuk bahasa sunda na mah wkwkw
kalo dengan modular kan enak developernya di alokasikan per feature kerjanya moal pabuis deui wkwk
yasudah sedikit saja intro modularnya, tapi yang mau dibahas pada artikel ini tidak seluruhnya tentang modular karena saya juga masih belajar wkwk lebih ke spesifik bagaimana cara pindah antar hati nya gan, eh ke hati terus.. maaf teringat seseorang wkkw antar modul maksudnya dengan Jetpack navigation component.
kalo belum tau Jetpack navigation Component baja dulu aja ya di https://developer.android.com/guide/navigation?hl=id
Kalo sudah, lanjut…saya akan coba kasih tutor cara perpindahan nya
pertama buat Project android baru terserah apapun namanya minumnya teh botol sosro hehe, jika sudah tambahkan pada Build.gradle app jadi seperti berikut:
plugins {
id 'com.android.application'
id 'kotlin-android'
id 'kotlin-android-extensions'
}
android {
compileSdkVersion 30
buildToolsVersion "30.0.2"
defaultConfig {
applicationId "com.arysugiarto.android.deep.modular_naviagtion_component"
minSdkVersion 16
targetSdkVersion 30
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
}
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation 'androidx.core:core-ktx:1.3.2'
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.2.1'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'androidx.lifecycle:lifecycle-extensions:2.0.0-alpha1'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
// navigation library
api 'androidx.navigation:navigation-fragment-ktx:2.3.1'
api 'androidx.navigation:navigation-ui-ktx:2.3.1'
// implement second feature
implementation project(':second_feature')jika sudah klik tombol sync yang muncul di atas, setelah itu kita buat nih modul featur nya dengan cara Klik File-New-New Module-pilih Android Library-Next-namai module nya sesuai fitur disini saya namai second_feature lau klik finish
terilihat pada kodingan yang di bold, fungsinya supaya modul app bisa akses ke modul ke dua nantinya
pasti sekarang bakal kaya gini penampakan project kita
sekarang buat pakacge baru bernama navigation pada res modul App dan buat file nav_graph.xml
buat fragmen baru dengan nama MainFragment dan ubah seprti berikut
class MainFragment : Fragment() {
companion object{
fun newInstance() = MainFragment()
}
private lateinit var viewModel: MainViewModel
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?): View {
val view = inflater.inflate(R.layout.fragment_main, container, false)
// implement navigate
view.navigateToFeatureTwo.setOnClickListener {
Navigation.findNavController(it).navigate(R.id.navigateToSecondFeature)
}
return view
}
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
viewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
// TODO: Use the ViewModel
}
}kalo ada eror-eror biarkan dulu gas saja dulu beresin step-stepnya wkwkw
lalu fragment_main.xml seprti 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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainFragment">
<Button
android:id="@+id/navigateToFeatureTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:text="Open Second Feature"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>tampilan nya akan seperti ini, tema-teman bisa berkreasi ya ini hanya contoh, ntar funsi button ini untuk menuju ke module feature second yang telah kita buat
Ubah MainActivity pada module App seperti berkut
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setupNavigation()
}
override fun onSupportNavigateUp() =
Navigation.findNavController(findViewById(R.id.mainNavigationFragment)).navigateUp()
private fun setupNavigation() {
val navController = Navigation.findNavController(findViewById(R.id.mainNavigationFragment))
NavigationUI.setupActionBarWithNavController(this@MainActivity, navController)
}
}
lalu activity_main.xml nay 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/mainNavigationFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/main_graph"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>Setelah itu tambahkan file ViewModel namai MainViewModel dan ubah jadi seperti berikut
class MainViewModel : ViewModel(){
}Buka modul second_feature dan buat activity seperti biasa namai second_activity sudah tak perlu di utak atik.
pada pakacge res module second_feature buat pakacge navigation dan buat file second_graph.xml
Buat fragment di second_feature dengan nama SecondFeature
udah gausah di utak atik wkwk
nah sekrang kita hubungkan ini dua insan ini eh, dua modul maksdunya agan aduuuuh..
buka file second_graph.xml pada module second_feature
dan ubah jadi sperti ini
<?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/second_graph"
app:startDestination="@id/secondFragment">
<fragment
android:id="@+id/secondFragment"
android:name="com.arysugiarto.android.deep.second_feature.SecondFragment"
android:label="fragment_second"
tools:layout="@layout/fragment_second" />
</navigation>lalu buka file main_graph.xml pada module utama yaitu modul App dan ubah jadi speti berikut :
<?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/main_graph"
app:startDestination="@id/mainFragment">
<include app:graph="@navigation/second_graph" />
<fragment
android:id="@+id/mainFragment"
android:name="com.arysugiarto.android.deep.modular_naviagtion_component.MainFragment"
android:label="fragment_main"
tools:layout="@layout/fragment_main">
<action
android:id="@+id/navigateToSecondFeature"
app:destination="@id/second_graph"
app:enterAnim="@anim/nav_default_enter_anim"
app:exitAnim="@anim/nav_default_exit_anim"
app:popEnterAnim="@anim/nav_default_pop_enter_anim"
app:popExitAnim="@anim/nav_default_pop_exit_anim" />
</fragment>
</navigation>terlihat pada kodingan yang di bold, itu fungsinya untuk mendefinisikan bahwa kita bisa akses ke luar modul yaitu second_graph yang ada pada modul second_feature, dan definsikan destinasinya ke second_graph.
jika di lihat dalam versi desain nya sepeti ini kan iya ga?
Setelah itu Run boy
Harusnya ketika kita klik button maka akan berpindah ke module yang kedua menampilkan fragment yang ada di module ke 2 :)
Full Code nya bisa kunjungi Github saya disini
Thanks jika adaa kesalahan mohon koreksi pada kolom komentar ya guys mari sama-sama belajar hehe
Reference:
