Ref
Basics of Jetpack Compose in Android
1. Tujuan Pembelajaran
Setelah mengikuti materi ini, mahasiswa diharapkan mampu:
- Menjelaskan konsep dasar Jetpack Compose.
- Membedakan Declarative UI dan Imperative UI/XML.
-
Membuat
@Composable function. -
Menggunakan
@Preview. -
Menggunakan layout
Column,Row, danBox. -
Mengatur ukuran dan jarak menggunakan
Modifier. -
Membuat scrolling menggunakan
verticalScroll()danLazyColumn. -
Menggunakan
Text,Button,Image, dan komponen UI dasar. - Memahami konsep state dan recomposition.
- Membuat aplikasi Android sederhana dengan Jetpack Compose.
2. Apa Itu Jetpack Compose?
Jetpack Compose adalah toolkit modern dari Google untuk membangun native Android UI menggunakan Kotlin.
Perbedaan utamanya dengan pendekatan Android tradisional adalah cara kita mendeskripsikan UI.
Pendekatan XML
Secara sederhana:
XML Layout ↓ findViewById() ↓ Kotlin/Java ↓ Manipulasi View
Contoh:
val textView = findViewById<TextView>(R.id.textView) textView.text = "Hello Android"
Developer harus menghubungkan objek UI dengan kode program.
Pendekatan Jetpack Compose
Dengan Compose:
Kotlin ↓ Composable Function ↓ UI
Contoh:
@Composable fun Greeting() { Text("Hello Android") }
UI langsung dideskripsikan menggunakan Kotlin.
3. Imperative UI vs Declarative UI
Ini adalah konsep paling penting yang sebaiknya dipahami mahasiswa sebelum belajar Compose.
Imperative UI
Developer memberi instruksi bagaimana UI harus diubah.
Buat TextView ↓ Cari TextView ↓ Ubah text ↓ Ubah visibility ↓ Ubah warna
Declarative UI
Developer mendeskripsikan UI seperti apa yang diinginkan berdasarkan data/state.
STATE ↓ COMPOSABLE FUNCTION ↓ UI
Jika state berubah:
State berubah ↓ Recomposition ↓ UI diperbarui
Dengan demikian, mahasiswa perlu memahami prinsip:
UI = f(state)
Artinya, UI merupakan representasi dari kondisi/state aplikasi saat ini.
4. Mengapa Jetpack Compose?
Beberapa keuntungan utama:
| Aspek | XML + View System | Jetpack Compose |
|---|---|---|
| Bahasa UI | XML | Kotlin |
| Bahasa logic | Kotlin/Java | Kotlin |
| Paradigma | Imperative | Declarative |
findViewById() | Umumnya diperlukan | Tidak diperlukan |
| Preview | XML Preview | @Preview |
| State UI | Lebih manual | Terintegrasi dengan Compose |
| Recomposition | Tidak ada | Ada |
| Boilerplate | Relatif banyak | Lebih ringkas |
| UI + Logic | Terpisah | Dapat berada dalam ekosistem Kotlin yang sama |
Catatan pedagogis: jangan mengajarkan Compose sebagai "pengganti XML yang selalu lebih baik". Mahasiswa tetap perlu mengenal View System karena masih terdapat banyak aplikasi Android yang menggunakan pendekatan tersebut dan Compose juga menyediakan interoperabilitas dengan View.
5. Struktur Dasar Jetpack Compose
Contoh paling sederhana:
@Composable fun Greeting() { Text( text = "Hello Android" ) }
Ada dua konsep penting:
@Composable
dan
Text()
@Composable menandakan bahwa sebuah function dapat digunakan untuk mendeskripsikan UI Compose.
6. Composable Function
Composable function adalah function Kotlin yang diberi anotasi:
@Composable
Contoh:
@Composable fun WelcomeMessage() { Text("Selamat Datang") }
Composable dapat dipanggil dari composable lainnya.
@Composable fun HomeScreen() { WelcomeMessage() Text("Belajar Jetpack Compose") }
Konsep ini memungkinkan UI dibangun secara hierarkis.
HomeScreen │ ├── WelcomeMessage │ └── Text │ └── Text
7. @Preview
@Preview digunakan untuk melihat tampilan composable secara langsung di Android Studio tanpa harus menjalankan aplikasi pada emulator.
Contoh:
@Preview(showBackground = true) @Composable fun WelcomePreview() { WelcomeMessage() }
Secara konseptual:
@Preview ↓ Android Studio ↓ Preview UI
Ini sangat berguna ketika mahasiswa sedang belajar desain UI.
8. Text
Komponen paling sederhana:
Text( text = "Hello Android" )
Contoh dengan beberapa properti:
Text( text = "Jetpack Compose", fontSize = 24.sp )
Tambahkan import:
import androidx.compose.ui.unit.sp
9. Column
Column digunakan untuk menyusun komponen secara vertikal.
@Composable fun Profile() { Column { Text("Nama: Fajar") Text("Program Studi: Informatika") Text("Universitas: XYZ") } }
Visualisasi:
┌─────────────────────┐ │ Nama: Fajar │ │ │ │ Program Studi │ │ │ │ Universitas │ └─────────────────────┘
Struktur:
Column │ ├── Text ├── Text └── Text
10. Row
Row digunakan untuk menyusun komponen secara horizontal.
@Composable fun SocialMedia() { Row { Text("Instagram") Text("YouTube") Text("GitHub") } }
Struktur:
Row │ ├── Text ├── Text └── Text
Secara visual:
Instagram YouTube GitHub
11. Box
Box digunakan ketika komponen perlu ditempatkan dalam area yang sama atau saling bertumpuk.
@Composable fun ProfileImage() { Box { Image( painter = ..., contentDescription = "Profile" ) Text( text = "ONLINE" ) } }
Konsep:
BOX │ ┌────┴────┐ │ Image │ │ + │ │ Text │ └─────────┘
12. Modifier
Salah satu konsep wajib dalam pembelajaran Compose adalah Modifier.
Modifier digunakan untuk mengatur berbagai aspek UI, misalnya:
- ukuran
- padding
- background
- alignment
- clickable
- fill width
- fill height
Contoh:
Text( text = "Hello", modifier = Modifier .padding(16.dp) )
Contoh lainnya:
Button( onClick = {}, modifier = Modifier .fillMaxWidth() .padding(16.dp) ) { Text("Login") }
Mahasiswa sebaiknya memahami:
Composable + Modifier ↓ UI yang terstruktur
13. Spacer
Spacer digunakan untuk memberikan jarak antar-komponen.
Column { Text("Nama") Spacer( modifier = Modifier.height(16.dp) ) Text("Email") }
Konsep:
Text ↓ Spacer ↓ Text
14. Padding
Padding memberikan ruang di sekitar sebuah komponen.
Text( text = "Hello", modifier = Modifier.padding(16.dp) )
Padding dapat diberikan secara spesifik:
Modifier.padding( start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp )
15. Scrolling
Untuk konten yang panjang, kita dapat menggunakan:
verticalScroll()
Contoh:
Column( modifier = Modifier .verticalScroll(rememberScrollState()) ) { Text("Materi 1") Text("Materi 2") Text("Materi 3") Text("Materi 4") }
Konsep:
┌───────────────┐ │ Materi 1 │ │ Materi 2 │ │ Materi 3 │ │ Materi 4 │ │ ↓ │ │ SCROLL │ └───────────────┘
16. LazyColumn
Untuk menampilkan daftar data, Compose menyediakan LazyColumn.
Contoh:
LazyColumn { item { Text("Mahasiswa") } item { Text("Dosen") } item { Text("Administrator") } }
Untuk data:
val students = listOf( "Andi", "Budi", "Citra", "Dina" ) LazyColumn { items(students) { student -> Text(student) } }
Konsepnya mirip dengan RecyclerView, tetapi API-nya lebih deklaratif.
17. Button
Compose menyediakan berbagai komponen interaktif.
Contoh:
Button( onClick = { println("Button clicked") } ) { Text("Klik Saya") }
Struktur:
Button │ └── Text
Yang penting mahasiswa pahami:
onClick = { }
adalah event handler.
18. State
Setelah mahasiswa memahami layout, materi sebaiknya segera dilanjutkan ke State.
Contoh:
var counter by remember { mutableStateOf(0) }
Kemudian:
Column { Text( text = "Counter: $counter" ) Button( onClick = { counter++ } ) { Text("Tambah") } }
Alurnya:
User klik Button ↓ counter++ ↓ State berubah ↓ Recomposition ↓ Text diperbarui
Misalnya:
Counter: 0 ↓ Klik ↓ Counter: 1 ↓ Klik ↓ Counter: 2
Ini merupakan jembatan penting dari "membuat UI" menuju "membangun aplikasi interaktif".
19. Mini Project: Student Profile
Untuk pertemuan awal, saya menyarankan studi kasus:
Student Profile App
Mahasiswa membuat aplikasi profil mahasiswa menggunakan Compose.
Tampilan:
┌──────────────────────────────┐ │ STUDENT PROFILE │ │ │ │ ┌────────┐ │ │ │ PHOTO │ │ │ └────────┘ │ │ │ │ Fajar B │ │ Informatics Student │ │ │ │ ┌──────────────────────────┐ │ │ │ Skills │ │ │ │ Kotlin │ │ │ │ Android │ │ │ │ Web Programming │ │ │ └──────────────────────────┘ │ │ │ │ [ Contact Me ] │ │ │ └──────────────────────────────┘
Mahasiswa menggunakan:
StudentProfile │ ├── Column │ ├── Image │ ├── Text │ ├── Text │ │ │ ├── Row │ │ ├── Text │ │ ├── Text │ │ └── Text │ │ │ └── Button │ └── Modifier
20. Learning Roadmap Jetpack Compose
Saya menyarankan materi kuliah Android Programming disusun bertahap seperti berikut:
JETPACK COMPOSE │ ┌─────────────┴─────────────┐ │ │ FUNDAMENTAL UI DESIGN │ │ ┌─────┼─────┐ ┌──────┼──────┐ │ │ │ │ │ │ Composable Preview Modifier Column Row Box │ │ │ │ │ └─────────────┴──────────────┴──────┴──────┘ │ COMPONENT │ ┌─────────────┼─────────────┐ │ │ │ Text Button Image │ │ │ └─────────────┼─────────────┘ │ STATE │ remember / State │ Recomposition │ EVENT │ User Action │ LIST │ LazyColumn / LazyRow │ NAVIGATION │ ARCHITECTURE │ ViewModel + State │ DATA │ Repository/API │ DATABASE │ PROJECT
Urutan perkuliahan yang saya rekomendasikan
| Pertemuan | Materi | Praktikum |
|---|---|---|
| 1 | Introduction to Compose | Hello Compose |
| 2 | Composable & Preview | Greeting App |
| 3 | Column, Row, Box | Profile UI |
| 4 | Modifier, Padding, Spacer | Card/Profile |
| 5 | Text, Image, Button | Student Profile |
| 6 | State & Recomposition | Counter App |
| 7 | Event Handling | Form Input |
| 8 | UTS / Mini Project | Simple App |
| 9 | LazyColumn / Lists | Student List |
| 10 | Material 3 | Modern UI |
| 11 | Navigation | Multi-screen App |
| 12 | ViewModel & State | MVVM |
| 13 | REST API | API Integration |
| 14 | Room / Local Data | CRUD |
| 15 | Final Project | Development |
| 16 | UAS / Project Presentation | Final App |
Dengan struktur tersebut, mahasiswa tidak hanya menghafal Column, Row, Box, dan LazyColumn, tetapi memahami cara berpikir deklaratif Compose dan kemudian mengembangkannya menjadi aplikasi Android yang terhubung dengan state, ViewModel, API, dan database.
Tidak ada komentar:
Posting Komentar