Salah satu komponen utama dalam membuat aplikasi adalah kemampuan dalam navigasi. Mengingat, kita tidak akan mungkin membuat satu halaman yang menjalankan semua fitur yang ada pada aplikasi kita, karena hal tersebut sangatlah kurang efektif, terutama dari sisi User Experience (UX). Untuk itu, perlu adanya mekanisme yang apik untuk membagi fitur-fitur kedalam beberapa halaman lain, dari sinilah, teknik navigasi muncul.

Navigasi adalah interaksi yang memungkinkan pengguna melakukan navigasi di, ke dalam, dan ke luar dari berbagai bagian konten dalam aplikasi Anda.

Komponen Navigation Android Jetpack mencakup library Navigation, plugin Safe Args Gradle, dan alat untuk membantu Anda menerapkan navigasi aplikasi. Komponen Navigation menangani beragam kasus penggunaan navigasi, dari klik tombol yang sederhana hingga pola yang lebih kompleks, seperti panel aplikasi dan panel navigasi.

Untuk membuat Navigasi, kita perlu menyiapkan beberapa hal berikut:

 

plugins {
// Kotlin serialization plugin for type safe routes and navigation arguments
kotlin(“plugin.serialization”) version “2.0.21”
}

dependencies {
val nav_version = “2.9.4”

// Jetpack Compose integration
implementation(“androidx.navigation:navigation-compose:$nav_version”)

// Views/Fragments integration
implementation(“androidx.navigation:navigation-fragment:$nav_version”)
implementation(“androidx.navigation:navigation-ui:$nav_version”)

// Feature module support for Fragments
implementation(“androidx.navigation:navigation-dynamic-features-fragment:$nav_version”)

// Testing Navigation
androidTestImplementation(“androidx.navigation:navigation-testing:$nav_version”)

// JSON serialization library, works with the Kotlin serialization plugin
implementation(“org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3”)
}

 

 

Setelah itu, kita dapat melakukan proses sync pada gradle untuk membuat gradle menjadi update dan dapat menambahkan fitur yang sudah kita definisikan. Untuk membuat sebuah navigasi, kita perlu membuat setidaknya 2 halaman. Dalam contoh ini, kita dapat membuat 1 halaman sebagai halaman utama dengan tambahan tombol yang dapat di klik untuk mengarah ke halaman ke dua, maka dari itu kode composablenya adalah seperti berikut:

@Composable
fun hal1(navigation: NavController){
var namaLengkap: String by remember{ mutableStateOf(“”) }
    Column (
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
){
        Text(“Halaman 1”)
Button(
onClick = {
                navigation.navigate(route = HAL2)
}
        ) {
            Text(“Ke Halaman 2”)
}

}

 

Pada halaman 1, kita lihat kita memanggil class navigation dengan paramter route ke HAL2. Sebelum itu, perlu kita ketahui bahwa untuk membuat composable halaman kita dapat dipanggil (object) maka kita perlu menjadikan mereka sebuah seriarizable (@Seriarizalbe):

@Serializable
object HAL1

@Serializable
object HAL2

 

Lalu, pada bagian main function, dapat kita buat seperti ini:

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
            MobProg2025Theme {
             val navController = rememberNavController()
NavHost(navController = navController, startDestination = HAL1) {
                    composable<HAL1> {
                        hal1(navigation = navController)
}
                    composable<HAL2> {
                        hal2(navigation = navController)
}

}

 

Kita perlu memanggil class rememberNavController() yang kita tampung dalam variable navController. Lalu kemudian, kita jadikan variable navController sebagai input paramter pada function composable yang telah kita buat baik pada halaman 1 atau pada halaman 2. Dengan begitu, ketika kita klik function tersebut, maka halaman akan berpindah, atau, dalam artian lain akan merender composable function Halaman 2.