Slide 1

Slide 1 text

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)

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Bagian 1 Pengenalan Android Compose

Slide 6

Slide 6 text

Old View Hierarchy

Slide 7

Slide 7 text

Olds Methods of Layout Development

Slide 8

Slide 8 text

Android Dev Summit

Slide 9

Slide 9 text

New Methods of Layout Development

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

Mengapa harus Compose? ● Lebih Sedikit Kode ● Cukup Bahasa Kotlin ● Deklaratif yang Intuitif ● Kecil dan Independen ● Separation of Concern ● Interoperability dengan XML ● Powerful API & Tool

Slide 12

Slide 12 text

Apps built with Compose

Slide 13

Slide 13 text

Bagian 2 Fitur Utama Android Compose

Slide 14

Slide 14 text

Fitur Terbaik Compose Less code Intuitive Accelerate Development Powerful

Slide 15

Slide 15 text

Less Code Do more with less code and avoid entire classes of bugs, so code is simple and easy to maintain.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Bagian 3 Konsep Dasar Layout dan Styling

Slide 20

Slide 20 text

Compose Tech Stack

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Thinking in Compose // 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) { if (newsList.size > 0){ Column { for (title in newsList){ Text(text = title) } } } else { Text(text = "No Data!") } }

Slide 23

Slide 23 text

Construct UI by describing what, not how.

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

Pendekatan Deklaratif Pesan kopi kepada barista untuk membuatkan kopi sesuai pesanan, contohnya Espresso.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

Material You

Slide 28

Slide 28 text

Material You, Pixel, and Android 12

Slide 29

Slide 29 text

Kind of Layout

Slide 30

Slide 30 text

Layout Sample @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(/* … */) } }

Slide 31

Slide 31 text

Add Alignment @Composable fun SurveyAnswer(answer: Answer) { Row ( verticalAlignment = Alignment.CenterVertically ){ Image(answer.image) Text(answer.text) RadioButton(/* … */) } }

Slide 32

Slide 32 text

Add Arrangement @Composable fun SurveyAnswer(answer: Answer) { Row ( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.fillMaxWidth(), ){ Image(answer.image) Text(answer.text) RadioButton(/* … */) } }

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

Scaffold & Slot-based Layout

Slide 35

Slide 35 text

Bagian 4 Mengelola Data dalam Compose

Slide 36

Slide 36 text

State controls UI, Events control State

Slide 37

Slide 37 text

Changing State Trigger Recomposition

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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("-") } } }

Slide 40

Slide 40 text

Remember Delegated Properties var quantity: MutableState = 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("-") } }

Slide 41

Slide 41 text

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("-") } } }

Slide 42

Slide 42 text

Bagian 5 Teknologi Serupa Mirip Android Compose

Slide 43

Slide 43 text

SwiftUI

Slide 44

Slide 44 text

Flutter

Slide 45

Slide 45 text

React

Slide 46

Slide 46 text

Bagian 6 Implementasi Android Compose

Slide 47

Slide 47 text

https://github.com/gilangadhan/TheMealsApp The Meals App

Slide 48

Slide 48 text

Bagian 7 Tips dan trik Android Compose

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Thank You! “Hidup itu bukan hanya tentang pencapaian mimpi-mimpi. Melainkan tentang seberapa banyak manusia yang kita mudahkan urusannya sehingga mereka tersenyum.” — SALIN TEMPEL

Slide 51

Slide 51 text

gilang.adhan gilang_adhan gilang_adhan [email protected] gilang-adhan