Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mastering Compose: The Key to Unlocking the Pot...

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

Dicoding Indonesia

March 18, 2023
Tweet

More Decks by Dicoding Indonesia

Other Decks in Programming

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
  3. 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
  4. 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.
  5. Mengapa harus Compose? • Lebih Sedikit Kode • Cukup Bahasa

    Kotlin • Deklaratif yang Intuitif • Kecil dan Independen • Separation of Concern • Interoperability dengan XML • Powerful API & Tool
  6. Less Code Do more with less code and avoid entire

    classes of bugs, so code is simple and easy to maintain.
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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!") } }
  12. 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.
  13. 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.
  14. Add Alignment @Composable fun SurveyAnswer(answer: Answer) { Row ( verticalAlignment

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

    = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.fillMaxWidth(), ){ Image(answer.image) Text(answer.text) RadioButton(/* … */) } }
  16. 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.
  17. 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
  18. 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("-") } } }
  19. 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("-") } }
  20. 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("-") } } }
  21. 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
  22. Thank You! “Hidup itu bukan hanya tentang pencapaian mimpi-mimpi. Melainkan

    tentang seberapa banyak manusia yang kita mudahkan urusannya sehingga mereka tersenyum.” — SALIN TEMPEL