Proyek ini merupakan implementasi dari tugas "Implementasi Pola Navigasi & Passing Data" menggunakan Jetpack Compose di Android Studio.
Aplikasi ini menerapkan pola Bottom Navigation untuk mengelola dua layar utama (daftar buku dan tambah buku) dan mengirimkan data objek antar-screen menggunakan anotasi @Serializable.
- Menerapkan salah satu pola navigasi lanjutan yaitu Bottom Navigation.
- Mengirimkan data objek (
Book) dari satu screen ke screen lainnya menggunakan Kotlinx Serialization (@Serializable). - Memahami struktur aplikasi multi-screen (Home, Add, Detail) di Jetpack Compose.
- ✅ Menampilkan daftar buku statis menggunakan
LazyColumn. - ✅ Menambah entri buku baru melalui formulir input.
- ✅ Navigasi antar layar utama (
Home,Add) menggunakan Bottom Navigation Bar. - ✅ Mengirim data objek
Bookantar layar (Home->Detail,Add->Detail) menggunakankotlinx-serializationuntuk konversi JSON. - ✅ Menampilkan data buku yang diterima di layar detail.
- Kotlin
- Jetpack Compose
- Android Studio
- Navigation Compose
- Kotlinx Serialization
Langkah-langkah:
- Clone repositori ini:
git clone [https://github.com/ysrednina0/BottomNavigation.git](https://github.com/ysrednina0/BottomNavigation.git)
- Buka Proyek: Buka Android Studio, pilih "Open", dan arahkan ke folder proyek yang baru saja Anda clone.
- Sync Gradle: Tunggu hingga Android Studio selesai mengunduh dependencies dan melakukan sync Gradle.
- Jalankan Aplikasi: Pilih emulator atau hubungkan perangkat fisik Anda, lalu tekan tombol "Run" (▶) di Android Studio.
Proyek ini dibangun menggunakan Kotlin dan Jetpack Compose. Ketergantungan utama meliputi:
androidx.compose.material3: Untuk komponen UI Material Design 3 (Scaffold, Button, OutlinedTextField, dll.).androidx.navigation:navigation-compose: Untuk mengelola alur navigasi antar composable screen.org.jetbrains.kotlinx:kotlinx-serialization-json: Untuk serialisasi dan deserialisasi objekBookmenjadi/dari string JSON saat dikirim antar layar.androidx.activity:activity-compose: Untuk integrasi Compose dengan Activity.
Aplikasi ini menggunakan Bottom Navigation sebagai pola navigasi utama untuk berpindah antar dua layar utama: HomeScreen dan AddBookScreen.
Menu navigasi (didefinisikan di TabView.kt) ditampilkan di bagian bawah aplikasi dan menampilkan indikator aktif sesuai screen yang sedang dibuka.
Aplikasi ini mengirim data objek Book ke DetailScreen dari dua alur berbeda:
- Pengguna menginput data (Judul, Penulis, Catatan, dan Status) di
AddBookScreen. - Saat tombol "Simpan Buku" ditekan, data tersebut dibungkus ke dalam objek
Bookbaru yang diberi anotasi@Serializable. - Objek
Bookdikonversi menjadi string JSON menggunakanJson.encodeToString(). - String JSON dikirim ke
DetailScreensebagai argumen navigasi melalui route. - Di
DetailScreen, data JSON diekstrak dari argumen dan diubah kembali ke objekBookdenganJson.decodeFromString(). - Data buku baru tersebut ditampilkan di tampilan detail.
- Pengguna menekan salah satu item buku dari daftar (
LazyColumn) diHomeScreen. - Objek
Bookyang ada (dari item yang diklik) dikonversi menjadi string JSON. - String JSON ini kemudian dikirim ke
DetailScreenmelalui route navigasi, sama seperti alur pertama. DetailScreenmenerima JSON, mengubahnya kembali menjadi objekBook, dan menampilkannya.
- Aplikasi terbuka dengan dua tab di Bottom Navigation: "Home" dan "Add".
- Tab Home (
HomeScreen): Menampilkan daftar buku yang sudah ada. Menekan salah satu buku akan membawa pengguna keDetailScreen, menampilkan data buku tersebut. - Tab Add (
AddBookScreen): Menampilkan formulir untuk menambah buku baru. - Setelah mengisi form dan menekan "Simpan Buku" → aplikasi berpindah ke
DetailScreen, menampilkan data buku yang baru saja dibuat. DetailScreen: Menampilkan detailBook(judul, penulis, status, catatan) yang diterimanya. Terdapat tombol "Back" untuk kembali ke layar sebelumnya (Home atau Add).
| HomeScreen (Daftar Buku) | AddBookScreen (Tambah Buku) | DetailScreen (Detail Buku) |
|---|---|---|
![]() |
![]() |
![]() |
| Tampilan daftar buku | Tampilan form tambah buku | Tampilan detail buku |
| Nama | NIM |
|---|---|
| Anindya Putri Aisyah | (23523136) |
| Nur Astrid Damayanti | (23523251) |


