Mastering Compose: The Key to Unlocking the Potential of Android App

Transcript

1. Mastering Compose: The Key to Unlocking the Potential of Android App Gilang Ramadhan Curriculum Developer Dicoding Indonesia Replace Me! (Bisa ditambahkan dengan image yang relevan)
2. Replace Me! (Bisa ditambahkan dengan image yang relevan) Mastering Compose: The Key to Unlocking the Potential of Android App Gilang Ramadhan | Curriculum Developer Dicoding Indonesia
4. Beberapa Poin yang Akan Dibahas • Pengenalan Android Compose • Fitur utama Android Compose • Konsep Dasar Layout dan Styling pada Android Compose • Mengolah Data dalam Android Compose • Teknologi Serupa Android Compose • Implementasi Android Compose • Tips dan Trik
5. Bagian 1 Pengenalan Android Compose
6. Old View Hierarchy
7. Olds Methods of Layout Development
8. Android Dev Summit
9. New Methods of Layout Development
10. Jetpack Compose is Android’s recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.
11. Mengapa harus Compose? • Lebih Sedikit Kode • Cukup Bahasa Kotlin • Deklaratif yang Intuitif • Kecil dan Independen • Separation of Concern • Interoperability dengan XML • Powerful API & Tool
12. Apps built with Compose
13. Bagian 2 Fitur Utama Android Compose
14. Fitur Terbaik Compose Less code Intuitive Accelerate Development Powerful
15. Less Code Do more with less code and avoid entire classes of bugs, so code is simple and easy to maintain.
16. Less Code Compatible with all your existing code so you can adopt when and where you want. Iterate fast with live previews and full Android Studio support. Imperative Declarative
17. Accelerate Development Compatible with all your existing code so you can adopt when and where you want. Iterate fast with live previews and full Android Studio support. • Composable Preview • Editor Action • Iterative code Development • Layout Inspector • Animation
18. Accelerate Development Create beautiful apps with direct access to the Android platform APIs and built-in support for Material Design, Dark theme, animations, and more. Material Design Dark Theme Animation
19. Bagian 3 Konsep Dasar Layout dan Styling
20. Compose Tech Stack
21. Fitur Kotlin pada Compose • Named Argument & Default Argument • Scope & receiver • Singleton object • Trailing comma • DSL (Domain Specific Language) • Higher-order Function (HoF) dan Lambda Expression • Delegated properties • Top Level Function
22. Thinking in Compose <!-- activity_main.xml --> <FrameLayout> <RecyclerView android:id=”@+id/listNews” ... /> <TextView android:id=”@+id/textError”.../> </FrameLayout> // Activity.kt val listNews = findViewById(R.id.listNews) val textError = findViewById(R.id.textError) if (data.size > 0){ listNews.visibility = View.VISIBLE textError.visibility = View.GONE } else { listNews.visibility = View.GONE textError.visibility = View.VISIBLE } // Activity.kt @Composable fun NewsScreen(newsList: List<News>) { if (newsList.size > 0){ Column { for (title in newsList){ Text(text = title) } } } else { Text(text = "No Data!") } }
23. Construct UI by describing what, not how.
24. Pendekatan Imperatif Pesan kopi kepada barista untuk: • mengambil biji kopi, • menggiling dengan granularitas tertentu, • menggunakan tamper kopi, • memasukkan kopi ke portafilter, • menyalakan mesin selama 25 detik, dan sebagainya.
25. Pendekatan Deklaratif Pesan kopi kepada barista untuk membuatkan kopi sesuai pesanan, contohnya Espresso.
26. Material Components and Layout Jetpack Compose offers an implementation of Material Design, a comprehensive design system for creating digital interfaces. Material Components (buttons, cards, switches, etc.) and layouts like Scaffold are available as composable functions.
27. Material You
28. Material You, Pixel, and Android 12
29. Kind of Layout
30. Layout Sample @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(/* … */) } }
31. Add Alignment @Composable fun SurveyAnswer(answer: Answer) { Row ( verticalAlignment = Alignment.CenterVertically ){ Image(answer.image) Text(answer.text) RadioButton(/* … */) } }
32. Add Arrangement @Composable fun SurveyAnswer(answer: Answer) { Row ( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.fillMaxWidth(), ){ Image(answer.image) Text(answer.text) RadioButton(/* … */) } }
33. Modifier Text( "Hello Compose!", ) Hello Compose Text( "Hello Compose!", Modifier.background(Color.Magenta) ) Hello Compose Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) ) Hello Compose Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) .padding(5.dp) ) Hello Compose Hello Compose Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) .padding(5.dp) .clickable { // Called when Text clicked } ) Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) .padding(5.dp) .clickable { // Called when Text clicked } ) Hello Compose Hello Compose Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) .clickable { // Called when Text clicked } .padding(5.dp) ) Modifiers allow you to decorate or augment a composable. Modifiers let you do these sorts of things: • Change the composable's size, layout, behavior, and appearance; • Add information, like accessibility labels; • Process user input; and • Add high-level interactions, like making an element clickable, scrollable, draggable, or zoomable.
34. Scaffold & Slot-based Layout
35. Bagian 4 Mengelola Data dalam Compose
36. State controls UI, Events control State
37. Changing State Trigger Recomposition
38. How to keep track of the quantity? @Composable fun CartItem() { var quantity = 1 Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } } } This state is not tracked by Compose
39. State Tracked by Compose @Composable fun CartItem() { var quantity = remember { mutableStateOf(1) } Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } }
40. Remember Delegated Properties var quantity: MutableState<Int?> = remember { mutableStateOf(1) } Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } var quantity: Int? by remember { mutableStateOf(1) } Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } }
41. Survive State in Configuration Change @Composable fun CartItem() { var quantity by remember { mutableStateOf(1) } Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } } } @Composable fun CartItem() { var quantity by rememberSaveable { mutableStateOf(1) } Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } } }
42. Bagian 5 Teknologi Serupa Mirip Android Compose
43. SwiftUI
44. Flutter
45. React
46. Bagian 6 Implementasi Android Compose
47. https://github.com/gilangadhan/TheMealsApp The Meals App
48. Bagian 7 Tips dan trik Android Compose
49. Tips dan Trick • Pelajari konsep dasar • Baca dokumentasi resmi • Gunakan contoh kode • Gunakan Playground • Belajar dari tutorial yang ada • Bergabung dengan komunitas • Praktik langsung • Gunakan tools yang tepat
50. Thank You! “Hidup itu bukan hanya tentang pencapaian mimpi-mimpi. Melainkan tentang seberapa banyak manusia yang kita mudahkan urusannya sehingga mereka tersenyum.” — SALIN TEMPEL
51. gilang.adhan gilang_adhan gilang_adhan gilang@dicoding.com gilang-adhan