Fragment dan Navigation


1. πŸ“– Pengertian Fragment

https://images.openai.com/static-rsc-4/zP-pYoKpVRHKwJi-t1NZCqObQ6gQeHr2AGgWtPgfQyspOOYqEnNLkjup35NhTMZUPvRoZIUDQTs1SwasxvGSx0eBtY2Rbbod56H_tgluDhWjOPpMiGfPD65OARor0PM1__FtkBmcTvlsYtR2G1Y9qceKM7pl1KOT_VI6X_Y3ngnakBCZ4DO1fU8LBrIanfbi?purpose=fullsize
https://images.openai.com/static-rsc-4/yyS_l5rUC7tnhjcZmwRcr9c4XxMGryX8eS3VL3UN4m14XcPglEBbXkNlGk30CzuVfTcNgmYFXBaq83ik7BFt1F4PKv8E3HsKHAOatQjbyVglWtYJUo77A9qgCHccv5KxINBUHOwQ4PitAU4jopaZdH2KPEkBrGDA85e-pZMygEel7u3kX5ZdOuk9ktcZhGfQ?purpose=fullsize
https://images.openai.com/static-rsc-4/swG3n1nUdCBjeMjRDImGzOAycmS5KMaPgfKpjp4sJEX_IWA0rcIFblG8fFnV1z-s5YfZXe0gRv1WenF9P3mTCss9dFI4bi1sU4jaIJsUMon1rQflbkC-p5YXxZ5gHFWv7qIAOXwZnhC4H6csyQpHfinQZIiQvEIq085bFtVqGU5l-gkMMYD9avOKwo0uq_M-?purpose=fullsize

8

πŸ” Penjelasan

Fragment adalah komponen UI modular dalam Android yang merepresentasikan bagian dari tampilan (UI) dalam sebuah Activity. Fragment tidak dapat berdiri sendiri, melainkan harus berada di dalam Activity.

🧠 Narasi

Jika Activity adalah satu layar penuh, maka Fragment adalah bagian-bagian kecil dari layar tersebut. Dengan Fragment, pengembang dapat membuat UI yang lebih fleksibel dan reusable, terutama untuk perangkat dengan ukuran layar berbeda seperti smartphone dan tablet.


2. 🧩 Perbedaan Fragment dan Activity

https://images.openai.com/static-rsc-4/eHs8AVlLMv70xJ6V0M_wG_AfTZOGSJF4QpRQF1X6mE5lyD6kZjhUjVJXu-C7zfDR2koQYoCUTPuNIKPQYkcLukfGrd6nmlSyzbFP_sx7W1rlf5AmmoOooaXtlqSu2c8D4Rnjq0fCU_MaY5WvuW4poCeG1de2FpQwH2M5gpNRMewFGas0GDoya1QmDa673ngB?purpose=fullsize
https://images.openai.com/static-rsc-4/LqClUT7xpKTSuUDxdyKo3T3bOQI7iuKiAwOrhJZijU7JIExPVJKWwUit_uUXXr-ivlxCbseiGWZOZ0sTF-rYf8HUH8oTqLGYs54D2fi8q2AaGMTSjCxvXdF5phAZ3J-ifXbrisEuvqPe2vmEXDroDkl1fnajaNTKZQ0FbIvnIVsZim4NjoaUyQaGqmmuuVDu?purpose=fullsize
https://images.openai.com/static-rsc-4/Zh-76879c9tRnjPXjzFZCldmDNLWSmElSpIdYfnwhYQvtbhij8Q_bF0D0RK5a46Vr7BbZZ4A4nT_q4x0PRSM5i1A96sQzYhgG-KHNx4rFOV-IHlrMN-EsXqMc_LZEgsS6vVwebUpGQ0dU7tQhEN54A7GLnoNgz_cItXkYyW7ovol0aFCo-YR-NyjUgxai9Xf?purpose=fullsize

9

πŸ“Š Perbandingan

AspekActivityFragment
PeranLayar utamaBagian dari layar
LifecycleMandiriBergantung Activity
ReusabilityTerbatasTinggi
FleksibilitasRendahTinggi

🧠 Narasi

Fragment memberikan fleksibilitas lebih dibandingkan Activity karena dapat digunakan kembali dalam berbagai tampilan dan konfigurasi layar.


3. 🧱 Struktur Dasar Fragment

https://images.openai.com/static-rsc-4/zP-pYoKpVRHKwJi-t1NZCqObQ6gQeHr2AGgWtPgfQyspOOYqEnNLkjup35NhTMZUPvRoZIUDQTs1SwasxvGSx0eBtY2Rbbod56H_tgluDhWjOPpMiGfPD65OARor0PM1__FtkBmcTvlsYtR2G1Y9qceKM7pl1KOT_VI6X_Y3ngnakBCZ4DO1fU8LBrIanfbi?purpose=fullsize
https://images.openai.com/static-rsc-4/GNNL63SyW5hrTOyFE8-CdiFt7uXGkGRuAnLHwCWqc3rie44eavHinFVcTPZrquTyubSEloBAsqPXV_-Vb1i0J-m1z3DqD4BygYgGIaaGRV2_fDQMX3de25MwjL1y7FkrUIrgVYuPmlj41g8M1AJjX-Mq7vnFPkSZftiRR_czLFmZ45s_zlVCk2v46yMqZkJq?purpose=fullsize
https://images.openai.com/static-rsc-4/pXVFNuffjgHOIU6hsRvXXT31JxIq2Bt0GQXyxLm_xyYHkb0eIlckCwUHClgRPvoB9c2fqnlamqR_jGwFUUHoYL_RTXFSYkmY3kPg4SQTfeVwAi46Di-yKB3lPIGskeuh7tnQGagZkeFw5hdcCMhJv_6NUi2OUghrYfGaK-AlQa5cMxCmhiiYh5Ky_DW58hLW?purpose=fullsize

7

πŸ” Contoh Kode Fragment

class FirstFragment : Fragment(R.layout.fragment_first) {
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
}
}

πŸ“Œ Penjelasan

  • Fragment() β†’ kelas dasar fragment
  • R.layout.fragment_first β†’ layout fragment
  • onViewCreated() β†’ inisialisasi UI

🧠 Narasi

Fragment memiliki struktur mirip Activity, tetapi lebih ringan dan fokus pada bagian tertentu dari UI.


4. πŸ”„ Lifecycle Fragment

https://images.openai.com/static-rsc-4/swG3n1nUdCBjeMjRDImGzOAycmS5KMaPgfKpjp4sJEX_IWA0rcIFblG8fFnV1z-s5YfZXe0gRv1WenF9P3mTCss9dFI4bi1sU4jaIJsUMon1rQflbkC-p5YXxZ5gHFWv7qIAOXwZnhC4H6csyQpHfinQZIiQvEIq085bFtVqGU5l-gkMMYD9avOKwo0uq_M-?purpose=fullsize
https://images.openai.com/static-rsc-4/xq8s0VpJBxZnmYVJCMgFHB_AvteBjtNb5XGuRTFrvkZkPYY1w2gXfKtnjdlvYtVj7M6TmniuF5ZzDiQ_qi7XqyacDHez1B1FY0BZSAim92Og8OfBu4mdAE0JSCjKFVlQMg7-_aeZkVDfrPhFnLxsYPnZcXnj4xa29oWo0MS2RrrNNcgH4s5kuK4KrsZkfkiR?purpose=fullsize
https://images.openai.com/static-rsc-4/jWwmTECgJU-oFeP2qJiW6wCD6dZWj58fbiV01lDfNSPiLhwvJiquP6C466jWYxMrSZfsZEju4QP4GgxYmNjF0w1FMCKLjdGOwLTlfbekc4qHlj06gF1i9GjkNorE0uLFK8UkayHDunrRlUu506jqLMi86XL-jCMkYtBOp5dUKhRXn9k-SD8Z5nRbDsFaewmd?purpose=fullsize

8

πŸ” Tahapan Lifecycle

MethodFungsi
onAttach()Fragment terhubung ke Activity
onCreate()Inisialisasi awal
onCreateView()Membuat UI Fragment
onViewCreated()UI siap digunakan
onDestroyView()UI dihancurkan
onDetach()Fragment dilepas dari Activity

🧠 Narasi

Lifecycle Fragment lebih kompleks karena bergantung pada Activity. Pemahaman lifecycle ini penting untuk menghindari bug dan memory leak.


5. πŸ”€ Menambahkan Fragment ke Activity

https://images.openai.com/static-rsc-4/p3Y1MoCuIfnqVucXaNqj4-1k_dTOmFsRDLuCE0TzKIlWT2EZpDJyX3UQKyj950W_iAGLMMGzx-KCm24i-RbwF_4h2vYDGFtA2vpQpso27nRjbaoNQ_H1KmLs6IGpxlPCu9NSLdzlZ9Hpn6fag2HY14ZM7C7jnBH2Dh6fwZmYWqLUVOUqfSH22ziqbGatxzrA?purpose=fullsize
https://images.openai.com/static-rsc-4/8v21zDNsqbCFmVyK6MqiteoU0ehKQWa1D2LARTWS6VIkGfgCsZIKLW9_EGQpJVPJtWDGF9AQRDW5JaPwLMQmJyn8AYLWyt076V5KHr9ntqUqZLzNpTzSpVOs3q0jiWHgmI_IRHchKwTuxRT68BhZ823FsVuElgx1mNyoyiwqLWzRjSxZLbzRfiQVW0BRkTog?purpose=fullsize
https://images.openai.com/static-rsc-4/eyBeC0HiaJJ6KE04Wsx4MeoXP1yfz1xwZsYZdl2aZ611Tx7OpzGiVeC-WwuFf2YuqbOlbY5q58dACK4_8_OBKwRFDRYZyvP63ohrR-3ZlMGpCuO6brZummp2x1Fcfr8-bqljNrtxYVLtt_TXTZRKn_zjzSa5ibsDuZNdx-HW54xzcF9dDQRyRkqoCkcNDSMp?purpose=fullsize

7

πŸ” Cara Menambahkan Fragment

Secara statis (XML)

<fragment
android:name="com.example.FirstFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

Secara dinamis (Kotlin)

supportFragmentManager.beginTransaction()
.replace(R.id.container, FirstFragment())
.commit()

🧠 Narasi

Fragment dapat ditambahkan secara statis atau dinamis. Pendekatan dinamis lebih fleksibel karena memungkinkan perubahan UI saat runtime.


6. πŸ“‘ Komunikasi Antar Fragment

https://images.openai.com/static-rsc-4/R0jIUIFpNedj4c2zp5ViBRENBz67NSGv2bMxEmP1f7CIX3eBO4YnqRq3UGFTWIMy__0ckoLZbnyGPU7jCrIX7jLqjb-k5B1OjxoSS9PRcEst1AGViTPU2rTCmyDCGuGaEOTvMc2zGcLAuEquZOG4OQ8WK34gjjvPK76-zNZRpNgfNDrrLLJjROZtJgKhCgCG?purpose=fullsize
https://images.openai.com/static-rsc-4/nXxMD6ZETApRtAzsnYhLuQg-RAjOxhLeHKi5ITLSBOvg9y9xjXVCmhT9bjv6-fXGy5fuFMO4HoeMTd9DIE3ABe6pdi_FJ9XZ5HLtyZhr1zZxxa4riyRTHASNfOzYf0wVR7_oHgwJGaK1j1J720DSti5-_KLkD2cO4w3fcAMkRtur2X0Clo86-_o5zMM8CUZE?purpose=fullsize
https://images.openai.com/static-rsc-4/aPe3voq6JZD30Dw6dV7rVGQ48lf5hy2vRL_tV2fG0O7xUKEB84M5AKyu4REsXBMlFgLHEU-4Pce1Y3UIJG8smPtjDdCNtv4ryBebhS46AGKsJQQ2nnUeNn8HOikIvo-RlNeXp0KUfvU_23ji-ngy9Nw41QXQ3k4qCDSRZA7kJj3n4meGIimB1medCvEPtnU5?purpose=fullsize

7

πŸ” Metode Komunikasi

  • Melalui Activity (Mediator)
  • Menggunakan Bundle
  • Menggunakan ViewModel

🧠 Narasi

Fragment tidak berkomunikasi langsung satu sama lain, melainkan melalui Activity atau mekanisme lain seperti ViewModel agar lebih terstruktur.


7. 🧭 Navigation dalam Android

https://images.openai.com/static-rsc-4/ciyXlyf1Lu1m_2jZceVVuplM16AbchLxpHeNAEWPOKuP9doODlzb6XKBrt57RGnUgsbuxG0LmJDCRJMnT3J9z0otrDvRkfUTAGEgEpDE2PTk9WIav1AGvlyERTJcjV8b66anIxHntiJESJYw-9M5Uj-zYkMfnk4-OOu7UGcY5MUmcPFccloAPv626s3JaO2t?purpose=fullsize
https://images.openai.com/static-rsc-4/3IL1ef2T2anVSEBK1J4x70dq5US_ID401Rl3rqUe0R6tHu-pIErqrv-_BwiU-HvkPkIMEFjCItbBByAgLPphQbx4ITVvDC62oAj7XMJwlSNorFEHC2JWvd-N9kLrgJuOyKN7v_rT0SdAhKsNw9tInPisSjRbirNIPrL9blLlJ1f3KIm0m8Bi1sg8YGengEVL?purpose=fullsize
https://images.openai.com/static-rsc-4/dSFUX4xBzmzMhWpk1X4ZB6XSOdMY5tvFiYxuvHaeKjUlIu4Uxa8cu2eMqu1eFMOv5S4k5R032R6t1gVwJQspkMHvH3tI_tF48hfyo-hLYCjbG_dnU-ep7p95p-X8AJyC5hwDyUbOLH2R4rKMWl1SJ4cmZctPn-Ur9fVwmBrbwx_fOQKwMlTfXzqpiPM6IHLw?purpose=fullsize

7

πŸ” Penjelasan

Navigation adalah mekanisme untuk berpindah antar layar atau Fragment dalam aplikasi.

πŸ“Œ Komponen Navigation

  • NavHost β†’ container fragment
  • NavController β†’ pengatur navigasi
  • Navigation Graph β†’ peta navigasi

🧠 Narasi

Navigation Component dari Android Jetpack mempermudah pengelolaan navigasi dengan cara yang lebih terstruktur dan aman.


8. πŸ—ΊοΈ Navigation Graph

https://images.openai.com/static-rsc-4/-9KHVwvV01RWQ-AkQUOaQddD-Rzjuq4ugtfNkFZGecA0NbivNnzIpyJP7c9xM191ZrJFJUO6e0zjBNIYGwW3LUlHFJIo0b6e8bncA55WgFNqlyAlLCj-KE4vzHf4txhx4qpw7Q5NqPj__ZYkuGhweypWk3y0ZgdP_84SRJnwde-E6am9GO7I7pvKY5qsIT8n?purpose=fullsize
https://images.openai.com/static-rsc-4/4SRT12N4VNWISdxPq4iyX00lT4Sh0XTtWhkznQVXizKQ2h9IVgJc6vSUUFJxyaGMetchE-sK68IWxk-kuVNY0Rd_-XWj9y9ny2u9MD8YrZ2eqVXQBi1q7Sre06SCry3CEy03a8ypFPJPNIFnK_AeQdsqvPnVNRcAk5HjTcAcgJWXgDt_iVdgMiRpYpCQ6dLZ?purpose=fullsize
https://images.openai.com/static-rsc-4/wHfB85HYQK-ESQEsKxq_wO2pxmRrjEuT1GgHFY84w4TFXsg0526mItCndFRi163jAE1F8qFWPcO1CrHJWhvmvrPcmsbNI7uHybxMYktCwYCeY8THHVv5KLf2y0BgmAkm709jJCoj8FiHv6V38biYXyTBavhaN7_iRFWndRbWT8mdZk0Lc7bGaljCDO86YUi-?purpose=fullsize

8

πŸ” Contoh XML Navigation

<navigation>
<fragment android:id="@+id/firstFragment"/>
<fragment android:id="@+id/secondFragment"/>
</navigation>

🧠 Narasi

Navigation Graph berfungsi sebagai peta alur navigasi aplikasi, sehingga memudahkan pengelolaan perpindahan antar layar.


9. πŸ”™ Back Stack pada Fragment

https://images.openai.com/static-rsc-4/ciyXlyf1Lu1m_2jZceVVuplM16AbchLxpHeNAEWPOKuP9doODlzb6XKBrt57RGnUgsbuxG0LmJDCRJMnT3J9z0otrDvRkfUTAGEgEpDE2PTk9WIav1AGvlyERTJcjV8b66anIxHntiJESJYw-9M5Uj-zYkMfnk4-OOu7UGcY5MUmcPFccloAPv626s3JaO2t?purpose=fullsize
https://images.openai.com/static-rsc-4/76CEE2qLxcAVB5DyxXTJ5nTAr-AUoW-5uLTiGwjM3QUgM2I6CflXJJ1DIB3qecYhwxr3RniT0YyyiI3Iu8wxcvHoUhlJNK_yUedSBk1Es2rHH-Jz-K_TLWsKPiU8yMrdUE1btRy9wxtAcANWuXHj2qXlxT278ZxmT93kq_0yvtAdDC_x0X9Pjcq-uK_l_L_T?purpose=fullsize
https://images.openai.com/static-rsc-4/pp4MsejtNb43WUzJdmJMXaHgIVlPTAUY1u3Qf1A6EIsY6bRfz2u7N0_nKhJ4dWizgBJRACaNy-Qf0MJYEt4btNsUKSSbOPaWYnEtH2PjYZvGx8Jm7dipJOw2gY4Sjag_u-cAeY9CkDPeG2g66epOW7LfovbP42cY4oyUugOjYnMYwPrq9kSOGWDR0mbCYsna?purpose=fullsize

7

πŸ” Penjelasan

Back Stack menyimpan riwayat Fragment yang telah dibuka.

πŸ“Œ Contoh

.addToBackStack(null)

🧠 Narasi

Dengan Back Stack, pengguna dapat kembali ke Fragment sebelumnya menggunakan tombol back.


10. ⚠️ Permasalahan Umum Fragment & Navigation

https://images.openai.com/static-rsc-4/BIn6_rOyK3sSi9G-xaVK4EZWgRplZQZlGNz6uoUMmQjvW9-JwnghrJNVpypWFF_IME7syiQWEfyizY3rkbDgHD77e3hhGv74B9fCygl-0I3TdGplYPu-q1Pf7twP43f_xQphbmiY9eiWUm0sM0Js7yRAR8sCvxeF5A6nLyirOBAYQDzthFLYGTwbj_hBpWJM?purpose=fullsize
https://images.openai.com/static-rsc-4/5GViyN5akohabU59l9JssAqp-A-Rjf5J_jGkvutnzuIaGNUXMQ-hx7US0SvoG9P9vJZkZ3RZMsSKrx5RbEf8strA0w07DZ-3qrR5wcvnJbfG9B4eGmH3m44027X0PYD8AZjzMKqsMvJvdJfyRcW70QYbtuszkbMIQD3LVeiwkkzpmf5LdcJIyfZkbo8_jmXO?purpose=fullsize
https://images.openai.com/static-rsc-4/rdb6z3g-gpC4GtqQuT4T3TsR-uzp-RWGb0u-InYWbAOhEQAbAecLl5XItFZRD-cVUUgQ8bkoP-9c4_KkqaTTN7W1mosRq12CKGG1dEk6Azm05GlmZ4SQS5z3ukAexecttJ1M9oWxsyR3mQDJ9Xopit0cXfoVTVQadZzasEsbVdNOm7m56R6dwM2yAUbD0Vlo?purpose=fullsize

7

πŸ” Masalah

  • Fragment overlap
  • Navigation crash
  • Memory leak
  • Lifecycle tidak sinkron

🧠 Narasi

Kesalahan dalam pengelolaan Fragment dan Navigation dapat menyebabkan aplikasi tidak stabil.


11. πŸ’‘ Best Practice

πŸ” Tips

  • Gunakan Navigation Component
  • Hindari fragment terlalu kompleks
  • Gunakan ViewModel untuk data
  • Kelola lifecycle dengan benar

🧠 Narasi

Dengan mengikuti best practice, aplikasi akan lebih mudah dikembangkan, scalable, dan minim bug.


πŸ“Œ Kesimpulan

Fragment dan Navigation adalah komponen penting dalam pengembangan aplikasi Android modern. Fragment memungkinkan UI yang modular dan fleksibel, sedangkan Navigation membantu mengatur alur perpindahan antar layar secara terstruktur.


🎯 Latihan / Tugas

  1. Buat 2 Fragment dalam 1 Activity
  2. Implementasikan navigasi antar Fragment
  3. Gunakan Navigation Graph
  4. Implementasikan Back Stack