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

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

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)

    View Slide

  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

    View Slide

  3. View Slide

  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

    View Slide

  5. Bagian 1
    Pengenalan Android
    Compose

    View Slide

  6. Old View Hierarchy

    View Slide

  7. Olds Methods of Layout Development

    View Slide

  8. Android Dev Summit

    View Slide

  9. New Methods of Layout Development

    View Slide

  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.

    View Slide

  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

    View Slide

  12. Apps built with Compose

    View Slide

  13. Bagian 2
    Fitur Utama Android
    Compose

    View Slide

  14. Fitur Terbaik Compose
    Less code Intuitive
    Accelerate
    Development
    Powerful

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  19. Bagian 3
    Konsep Dasar Layout
    dan Styling

    View Slide

  20. Compose Tech Stack

    View Slide

  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

    View Slide

  22. Thinking in Compose


    android:id=”@+id/listNews” ... />


    // 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!")
    }
    }

    View Slide

  23. Construct UI by describing what,
    not how.

    View Slide

  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.

    View Slide

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

    View Slide

  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.

    View Slide

  27. Material You

    View Slide

  28. Material You, Pixel, and Android 12

    View Slide

  29. Kind of Layout

    View Slide

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

    View Slide

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

    View Slide

  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(/* … */)
    }
    }

    View Slide

  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.

    View Slide

  34. Scaffold & Slot-based Layout

    View Slide

  35. Bagian 4
    Mengelola Data dalam
    Compose

    View Slide

  36. State controls UI, Events control State

    View Slide

  37. Changing State Trigger Recomposition

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. Bagian 5
    Teknologi Serupa Mirip
    Android Compose

    View Slide

  43. SwiftUI

    View Slide

  44. Flutter

    View Slide

  45. React

    View Slide

  46. Bagian 6
    Implementasi Android
    Compose

    View Slide

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

    View Slide

  48. Bagian 7
    Tips dan trik Android
    Compose

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide