Tugas Week 2 - PPB G - 5025221005
Tugas 2 - Membuat aplikasi Hello Android
NAMA : Nabilah Atika Rahma
NRP : 5025221005
KELAS : Pemrograman Perangkat Bergerak - PPB G
TAHUN : 2025
JetPack Compose Guide
.png)
Starting a new Compose project
Project Compose baru dimulai dengan memilih Empty Activity dari template.
Getting started with Compose
Jetpack Compose adalah framework deklaratif untuk membangun UI di Android menggunakan Kotlin ditandai dengan anotasi @Composable yang berguna untuk menyusun tampilan secara hierarkis.
Dalam aplikasi Android berbasis Compose, Activity tetap menjadi entry point, di mana layout didefinisikan menggunakan setContent tanpa file XML, melainkan langsung memanggil fungsi @Composable. Selain itu, untuk melihat tampilan tanpa menjalankan aplikasi, Android Studio menyediakan fitur preview dengan anotasi @Preview, yang memungkinkan pengembang melihat hasil komponen UI langsung di editor.
Simple Customize UI
Untuk mengubah background pada Greeting, gunakan Surface dan atur warnanya dengan MaterialTheme.colorScheme.primary.
Modifiers
Modifiers dalam Jetpack Compose digunakan untuk mengatur tata letak, tampilan, dan perilaku elemen UI dalam parent layoutnya.
Reusing Compose
Semakin banyak komponen yang ditambahkan ke UI, semakin kompleks hierarki yang terbentuk, sehingga memecah fungsi menjadi komponen kecil modular akan menjadi lebih efektif sehingga mengurangi duplikasi kode dan lebih rapi.
Creating Columns and Rows
Dalam Jetpack Compose, tersedia tata letak dasar terdiri dari Column, Row, dan Box, yang memungkinkan penyusunan elemen UI secara vertikal, horizontal, atau bertumpuk. Selain itu fungsi @Composable dalam Jetpack Compose dapat digunakan seperti fungsi Kotlin biasa sehingga dapat menggunakan looping for.
Adding a Button and State
Untuk menambahkan button atau tombol bisa menggunakan ElevatedButton dari Material3, sedangkan untuk menambahkan interaksi, kita perlu menyimpan status. State dan MutableState adalah antarmuka yang menyimpan beberapa nilai dan memicu update UI (rekomposisi) setiap kali nilai tersebut berubah. Disamping itu, ada state hoisting untuk memindahkan state ke tingkat yang lebih tinggi dalam hierarki composable agar dapat digunakan oleh beberapa composable yang membutuhkannya sehingga menghindari duplikasi state, mempermudah testing, serta membuat composable lebih reusable.
Performant Lazy List, Persisting State, and Animating List
Penggunaan LazyColumn bertujuan untuk menampilkan daftar (large list) secara efisien karena hanya merender item yang terlihat di layar, LazyColumn tidak recycle seperti RecyclerView. App memiliki dua masalah: state onboarding tidak bertahan saat rotasi atau konfigurasi berubah, dan state ekspansi item daftar hilang saat digulir atau rotasi. Menggunakan remember tidak cukup karena state hilang saat aktivitas restart sehingga perlu penggunaan rememberSaveable untuk menyimpan state meskipun terjadi rotasi, perubahan konfigurasi, atau proses mati. Compose menyediakan berbagai cara untuk animasi UI, dari API tingkat tinggi hingga kontrol penuh dengan API tingkat rendah seperti animateDpAsState. Efek dapat ditambahkan dengan spring untuk animasi lebih alami juga spesifikasi animasi lain seperti tween atau repeatable, atau fungsi lain seperti animateColorAsState.
Styling and theming your app
Jetpack Compose dapat menggunakan MaterialTheme untuk menetapkan warna, tipografi, dan bentuk secara konsisten, dark mode juga dapat ditampilkan, warna khusus didefinisikan di Color.kt. SideEffect mengatur warna status bar agar selaras dengan tema sehingga akan tetap konsisten.
Finishing
Sebagai penyempurnaan, penggantian tombol dengan ikon menggunakan IconButton dan Icon memungkinkan tampilan yang lebih intuitif. Penyesuaian padding agar optimal dan deskripsi aksesibilitas menggunakan stringResource dari strings.xml. Animasi ekspansi teks diterapkan secara otomatis dengan animateContentSize pada Row, menggantikan kebutuhan extraPadding. Selain itu, penggunaan Card dengan CardDefaults.cardColors memberikan tampilan lebih estetis dan moder dan menciptakan pengalaman pengguna yang lebih dinamis dan menarik.
Thank You - 🚀 Happy Coding with Jetpack Compose! 🎉
Comments
Post a Comment