Mengirimkan data JSON menggunakan Navigation pada Android Jetpack Compose bisa dilakukan dengan memanfaatkan parameter yang dikirim melalui NavHost. Berikut adalah langkah-langkahnya:
Buat project baru menggunakan android studio. pilih yang empty activity dari jetpack compose
Tambahkan depedency pada
build.gradle
seperti dibawah ini :
implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.0")
implementation("com.google.code.gson:gson:2.11.0")
Buat data class baru untuk mempresentasikan data json kita. buat file baru berinama User.kt
import kotlinx.serialization.Serializable
@Serializable
data class User(val id: Int, val name: String, val email: String)
Pada MainActivity buat function compose baru dengan nama MainNavGraph, seperti dibawah ini :
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument
import kotlinx.serialization.json.Json
@Composable
fun MainNavGraph() {
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "home_screen") {
composable("home_screen") {
HomeScreen(navController)
}
composable(
route = "detail_screen/{jsonData}",
arguments = listOf(
navArgument("jsonData") {
type = NavType.StringType // Mendefinisikan tipe data sebagai String
}
)
) { backStackEntry ->
val jsonData = backStackEntry.arguments?.getString("jsonData")
val user = jsonData?.let { Json.decodeFromString<User>(it) } // Parsing JSON menjadi objek User
DetailScreen(user)
}
}
}
Lalu buat function compose baru sebagai tampilan awal yang akan dieksekusi: seperti dibawah ini:
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavController
import kotlinx.serialization.encodeToString
import kotlinx.serialization.json.Json
@Composable
fun HomeScreen(navController: NavController) {
val user = User(id = 1, name = "John Doe", email = "john.doe@example.com")
val jsonString = Json.encodeToString(user) // Mengonversi objek User menjadi JSON string
// Tombol untuk navigasi
androidx.compose.material.Button(onClick = {
var jsonstring = URLEncoder.encode(jsonString, "UTF-8")
navController.navigate("detail_screen/$jsonstring") // Mengirim data JSON melalui route
}) {
androidx.compose.material.Text(text = "Go to Detail")
}
}
[code]
6. Kemudian, Buat json baru untuk tampilan detail navigation :
[code]
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
@Composable
fun DetailScreen(user: User?) {
if (user != null) {
// Tampilkan data user
androidx.compose.material.Text(text = "User ID: ${user.id}")
androidx.compose.material.Text(text = "User Name: ${user.name}")
androidx.compose.material.Text(text = "User Email: ${user.email}")
} else {
androidx.compose.material.Text(text = "No user data available.")
}
}
Hasil eksekusi dari project diatas, navigation yang akan pertama kali dijalankan adalah home_screen. Dengan satu tombol Go to detail, ketika diklik maka data json user akan dikirim ke DetailScreen.
Selamat mencoba, Terimakasih
